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?
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