У меня была противоположная проблема. Чтобы бэкэнд HTML5 работал с dropzone, мне пришлось сделать:

beginDrag(props) {
  Dropzone.instances[0].disable() 

и

endDrag(props, monitor, component) {
  Dropzone.instances[0].enable()

Моя dropzone крепится к корпусу, и вы можете поиграть с порядком ее установки.
Я думаю, что сделать его по всему телу, а затем принять меры в зависимости от того, куда вы помещаете файл, может быть лучшим вариантом, если ничего не работает.

Я также столкнулся с проблемой, когда перетаскиваемый элемент имеет <input> , и если пользователь выбирает / перетаскивает внутри него, он перетаскивает элемент. Я, вероятно, могу просто вернуть false из canDrag если ввод сфокусирован, и это должно помочь.

Не знаю, как решить проблему, мешающую загрузке HTML с помощью перетаскивания. Я уже включил его на всем макете. @gaearon , мысли?

@ffxsam Это все еще проблема для вас?

Я не знаю. Мне пришлось удалить его из-за этой проблемы, поэтому я не мог сказать вам, все еще проблема - извините! Вы можете закрыть эту проблему, если хотите.

Привет, я столкнулся с той же проблемой, я собирался открыть проблему, но вижу, что она уже открыта.
Дело в том, что где бы вы ни создавали ReactDnD, родное событие onDrop перестает работать.
У меня такой же вариант использования, все тело - это «зона перетаскивания», всегда ожидающая перетаскивания файла, я просто использую собственные события для этого компонента, так как это очень простая функциональность и поставляется из коробки. Но в представлениях, в которых у меня работает ReactDnD, событие drop не запускается, и это забавно, потому что оно не перезаписывает событие onDragEnter или onDragStart.
Есть подсказка @kesne @gaearon ? Я действительно не хочу удалять ReactDnD, это лучшая зависимость перетаскивания для React.

@kesne @gaearon У меня та же проблема, что и у @xavibonell . Я в основном использую React DND с Wordpress, а загрузчик мультимедиа WordPress использует собственные события перетаскивания для загрузки файлов. Его обратный вызов onDrop не запускается, только когда в приложении используется ReactDND. Удаление целей перетаскивания Reactdnd решает проблему. Я потратил несколько месяцев на проект, и reactdnd является его основной частью и широко используется. Я определенно не могу позволить себе перейти в другую библиотеку на данном этапе. Из этой темы, а также из аналогичных отчетов в Stack Overflow я вижу, что эта проблема существует уже довольно давно. Мы будем очень благодарны за любое решение этой проблемы.

Да, вполне вероятно, что между собственными и настраиваемыми элементами dnd существует некоторая некорректная связь. В настоящее время у меня нет времени разбираться в этой проблеме, но я планирую выделить некоторое время для этого проекта, и это будет одна из первых проблем, над которыми я обращаюсь.

Если вы можете, было бы очень полезно получить минимальную настройку репо с примером воспроизведения, чтобы мы могли попытаться найти лучший способ справиться с этим.

@kesne Большое спасибо за ваш ответ, и мне приятно знать, что вы
Тем временем я, кажется, придумал временный взлом, еще не тестировал его полностью, но, похоже, пока что помогает. Я заметил, что в HTML5Backend есть функции setup () и teardown (), которые связывают всех слушателей событий с элементом окна. В моем случае загрузчик файла wordpress представляет собой модальное окно, занимающее весь экран, и поэтому никакие элементы ReactDND нельзя перетаскивать или отбрасывать, когда модальное окно открыто. Итак, во время открытия модального окна я вызываю функцию teardown () в экземпляре серверной части (доступном через DragDropManager), а во время закрытия модального окна я вызываю функцию setup (). Кажется, это работает нормально, но не могли бы вы сообщить мне, может ли повторный вызов функций разрыва и настройки вызвать какие-либо другие проблемы с ReactDND для существующих или вновь созданных компонентов?

в этом проблема: https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452

на основе комментария кода «Не показывать красивый курсор», похоже, что e.dataTransfer.dropEffect рассматривается только как свойство отображения. но установка dropEffect на none самом деле, похоже, предотвращает полное удаление файлов. Стоит отметить, что установка его на move , copy или link работает нормально. это в Chrome 55.0.2.

мы действительно можем воспроизвести это за пределами react-dnd все вместе. я создал скрипку, которая изолирует проблему: https://jsfiddle.net/ypr6os00/8/

статья MDN для dropEffect, кажется, предполагает, что effectAllowed является функциональным, а dropEffect - презентационным. хотя скрипка говорит сама за себя ...

изменить: это та же проблема, что и https://github.com/gaearon/react-dnd-html5-backend/issues/25

Я могу подтвердить, что в моем случае, просто закомментировав e.dataTransfer.dropEffect = 'none'; (на https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend ) исправлена ​​моя проблема с реакцией-dnd, мешающей моим событиям сброса Dropzone.

Для справки у меня есть установка, подобная следующей:

<DragDropContextProvider backend={HTML5Backend}>
  <Dropzone>
    <DropTargetComponent />
    <OtherComponent>
      <DragSourceComponent1 />
      <DragSourceComponent2 />
      <DragSourceComponentN />
    </OtherComponent>
  </Dropzone>
</DragDropContextProvider>

В которых DropTargetComponent = DropTarget(TYPE, target, collect)(Component) и DragSourceComponent = DragSource(TYPE, source, collect)(Component) .

Есть ли какие-либо известные побочные эффекты этого исправления или лучшего исправления? В противном случае, может быть, это могло быть объединено навсегда?

Спасибо за отличную работу и @ kn0ll за

[РЕДАКТИРОВАТЬ]
Я сделал форк Github и пакет npm, пока эта проблема не будет решена в основном проекте, если это кому-то пригодится.

спасибо за обходной путь

Я обнаружил, что использование примера response-dropzone для вложенных dropzone работает. он останавливает распространение, что, как я полагаю, является проблемой. это был мой обходной путь, пока я не нашел эту проблему сегодня

У меня такая же проблема. Учитывая идею вложенных dropzones, я закончил тем, что обернул свой компонент Any-uploading-component внутри div и добавил к этому div свойство onDragOver, которое просто останавливает распространение. В моем случае это, похоже, помогло, вот пример (я использовал Filepond):

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

Однако мне не нравится идея, что react-dnd может так сильно повлиять на функциональность d & d других компонентов. Это похоже на огромную неудачу, когда какой-то компонент, использующий response-dnd для DOM-узлов d & d, может нарушить функцию удаления файлов d & d в другом компоненте. +1 за исправление этого в библиотеке

Может быть, какое-то быстрое решение могло бы заключаться в том, что dropEffect можно было бы каким-то образом указать через какую-то цепочку опор?

В итоге я использовал вилку @silvainSayduck для бэкэнда HTML5. меня устраивает. жаль, что эта ошибка не исправлена ​​напрямую в response-dnd, но, по крайней мере, есть обходной путь

Есть ли шанс исправить это в ближайшее время? @silvainSayduck не могли бы вы открыть

Я создал запрос на перенос из своего репозитория, не уверен, что это сильно поможет (поскольку я до сих пор не знаю, есть ли в комментариях эта одна строка нежелательные побочные эффекты или даже если она устраняет проблему для всех случаев использования).

1239

@darthtrevino. Не могли бы вы принять участие в этом проекте?

Взглянув на PR, это выглядит разумным, мне просто нужно убедиться, что он не ошибается с примерами

Объединен в # 1240

Большое спасибо @darthtrevino! Когда это будет выпущено в версии npm?

К концу дня - когда у меня появляется время для этого проекта, мой обычный рабочий процесс - проработать пакет PR, а затем вырезать релиз.

@darthtrevino доступно ли оно в текущей версии? когда это будет доступно?

Я верю, что это в текущем выпуске, да. Сообщите мне, если у вас возникнут проблемы

@darthtrevino спасибо, это доступно.

У меня такая же проблема. Учитывая идею вложенных dropzones, я закончил тем, что обернул свой компонент Any-uploading-component внутри div и добавил к этому div свойство onDragOver, которое просто останавливает распространение. В моем случае это, похоже, помогло, вот пример (я использовал Filepond):

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

Однако мне не нравится идея, что react-dnd может так сильно повлиять на функциональность d & d других компонентов. Это похоже на огромную неудачу, когда какой-то компонент, использующий response-dnd для DOM-узлов d & d, может нарушить функцию удаления файлов d & d в другом компоненте. +1 за исправление этого в библиотеке

Может быть, какое-то быстрое решение могло бы заключаться в том, что dropEffect можно было бы каким-то образом указать через какую-то цепочку опор?

Добавление event.stopPropagation() в handleDragOver [Dropzone] устраняет проблему в моем случае. спасибо @vileppanen

Эта ветка спасла мне жизнь

Для тех, кто сталкивается с этой проблемой, когда <Dropzone /> находится внутри компонента react-dnd , работает то же решение - упаковка <Dropzone /> в <div onDragOver={e=> e.stopPropagation() /> с помощью onDragOver используется для остановки распространения.