两个有冲突的拖放库

Question

我们都在使用react-sortable-hoc并且react-dropzone如果在单独的页面上它们可以正常工作。但是，在同一页面上使用react-sortable-hoc时不能正常工作，react-dropzone因为我注意到它react-dropzone也会被react-sortable-hoc. （例如，我不能再在其他项目之间拖动一个项目。）我尝试添加e.preventDefault()and e.stopPropagation()onreact-sortable-hoc的onSortStart事件，但react-dropzone仍然被触发。我们可以尝试什么其他方法让他们一起玩得很好/不让对方受到影响？

Answer 1

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

更具体地说，dragover处理drop程序注册在document：

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

如果这是问题，您应该能够通过将 react-dropzone选项preventDropOnDocument设置为false（默认为true）来规避此问题。

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

Answer 2

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

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