javascriptreactjsdrag-and-dropreact-dropzonereact-sortable-hoc

Two drag and drop libraries having conflict


We are both using react-sortable-hoc and react-dropzone and they work fine if on separate pages. However, react-sortable-hoc do not work properly when react-dropzone is used on the same page because I noticed that react-dropzone also gets triggered by the drag event from the react-sortable-hoc. (E.g. I can no longer drag an item in between other items.)

I tried adding e.preventDefault() and e.stopPropagation() on react-sortable-hoc's onSortStart event but react-dropzone is still being triggered.

What other approach can we try to make them play nice together / not allow the other to be affected?


Solution

  • I created a Sandbox and tried to reproduce your code which is using both react-dropzone and react-sortable-hoc at the same component. And it works well and has no problem.

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