有冲突的两个拖放库

Question

我们都在使用react-sortable-hoc和react-dropzone，如果在单独的页面上，它们可以很好地工作。但是，当在同一页面上使用react-sortable-hoc时，react-dropzone不能正常工作，因为我注意到react-dropzone也是由从react-sortable-hoc拖动事件触发的。(例如，我不能再在其他项目之间拖动一个项目。)

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

我们还能用什么方法让他们在一起玩得很好/不让对方受到影响？

Answer 1

我创建了一个Sandbox，并尝试在相同的组件上使用react-dropzone和react-sortable-hoc来再现您的代码。它运行良好，没有任何问题。

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

Answer 2

如果问题是在删除时引起的(而不是在开始拖动时)：regarding区域接管了整个窗口中的文件删除，以防止浏览器在用户错过拖放区域时从当前页面导航到已删除的文件(这是一个常见的烦恼)。

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

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

如果这就是问题所在，您应该能够通过将react下拉区域option preventDropOnDocument设置为false (默认为true)来规避这一问题。

或者，您可以尝试使用react dropzone option noDragEventsBubbling，但我认为这将处理相反的问题(在删除文件时触发react可排序的事件)。