两个拖放库有冲突

Question

我们都在使用 react-sortable-hoc 和 react-dropzone，如果在不同的页面上，它们工作正常。但是，当在同一页面上使用 react-dropzone 时，react-sortable-hoc 无法正常工作，因为我注意到 react-dropzone 也会被来自 react-sortable-hoc 的拖动事件触发。 （例如，我无法再将一个项目拖到其他项目之间。）

我尝试在 react-sortable-hoc 的 onSortStart 事件中添加 e.preventDefault() 和 e.stopPropagation()，但 react-dropzone 仍然被触发。

还有什么其他方法可以让他们一起玩得开心/不让对方受到影响？

Answer 1

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

更具体地说，dragover 和 drop 处理程序是 registered on the document:

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

如果这是问题所在，您应该可以通过将 react-dropzone option preventDropOnDocument 设置为 false（默认为 true）来规避此问题。

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

Answer 2

我创建了一个沙盒并尝试重现您在同一组件中同时使用 react-dropzone 和 react-sortable-hoc 的代码。而且效果很好，没有问题。

https://codesandbox.io/s/nifty-ganguly-khswc?file=/src/App.js:1156-1485