Конфликт двух библиотек перетаскивания

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

Если проблема возникает при отбрасывании (а не при запуске перетаскивания ): response-dropzone берет на себя все окно, касающееся отбрасывания файлов, чтобы предотвратить переход браузера от текущая страница в перетащенный файл, если пользователь пропускает зону перетаскивания (обычное раздражение).

Точнее, обработчики dragover и drop зарегистрированы на document :

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

Если это проблема, вы можете обойти ее, установив опцию response-dropzone preventDropOnDocument на false (по умолчанию true).

В качестве альтернативы вы можете попробовать опцию response-dropzone noDragEventsBubbling, но я думаю, что это решит противоположную проблему (запуск событий на response-sortable-ho c при удалении файлов)

Answer 2

Я создал песочницу и попытался воспроизвести ваш код, который использует как react-dropzone, так и react-sortable-hoc в одном компоненте. И он работает хорошо и без проблем.

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