Javascript 存在冲突的两个拖放库

我们都在使用

react-sortable-hoc

和

react-dropzone

，如果在单独的页面上，它们可以正常工作。但是，在同一页面上使用

react-sortable-hoc

时，

react-dropzone

不能正常工作，因为我注意到

react-dropzone

也会被

react-sortable-hoc

的拖动事件触发。（例如，我不能再在其他项目之间拖动项目。）

我尝试在

react sortable hoc

的

onSortStart

事件中添加

e.preventDefault（）

和

e.stopPropagation（）

，但

react dropzone

仍被触发

---

还有什么其他方法可以让他们一起玩得很好/不让其他人受到影响？

如果问题是在拖放时（而不是在开始拖动时）引起的：react dropzone会接管关于文件拖放的整个窗口，防止浏览器在用户错过放置区域时从当前页面导航到放置的文件（常见的麻烦）

更具体地说，

dragover

和

drop

处理程序是：

如果这是问题所在，您应该能够通过将react dropzone设置为

false

（默认值为

true

）来规避此问题

---

或者，您可以尝试react-dropzone，但我认为这会处理相反的问题（在删除文件时触发react-sortable hoc上的事件）

我创建了一个沙盒，并尝试复制您的代码，该代码在同一组件上同时使用了

react-dropzone

和

react-sortable hoc

。它运行良好，没有问题

---

为什么要使用两个不同的库来执行相同的操作？React dropzone用于拖动文件，React sortable用于对项目列表进行排序。它们做的事情不一样。请显示相关代码，如果可能的话，还请显示一个最小的可复制代码，并替换它们。有很多类似的LIB，请检查@Firanolfind我发现你的评论没有太大帮助。我想，使用某些LIB通常是有原因的；-）然后你提出“只是另一个图书馆”，没有证据，也不知道需求。在这种情况下，替换这两个库是没有意义的，IMHO：如果您不知道是什么导致了问题，那么您宁愿先替换一个库。此外，您建议的库不处理文件上传，不是吗？注意：如果没有可复制的沙盒，我们只能猜测，但这个答案可能会对OP有所帮助&我希望它对其他库有用。显然，这毕竟不是冲突问题。但是谢谢你的帮助。这对我解决问题帮助最大。我知道我应该自己做，但是没有时间。是的，显然，这不是两个库发生冲突的问题，而是其他问题。无论如何，如果有人遇到此线程，可以尝试添加

useWindowAsScrollContainer={true}

，因为我的是一个容器问题。

document.addEventListener('dragover', onDocumentDragOver, false)
document.addEventListener('drop', onDocumentDrop, false)