Yo tuve el problema contrario. Para que el backend HTML5 funcione con dropzone, tuve que hacer:

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

y

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

Mi zona de caída está montada en el cuerpo y es posible que desee jugar con el orden de montaje.
Creo que hacerlo en todo el cuerpo y luego tomar medidas en función de dónde suelte el archivo podría ser el camino a seguir para usted si nada más funciona.

También encontré un problema en el que el elemento que se puede arrastrar tiene un <input> , y si el usuario selecciona / arrastra dentro de él, arrastra el elemento. Probablemente pueda devolver false de canDrag si la entrada está enfocada, y eso debería funcionar.

Sin embargo, no estoy seguro de cómo abordar la interferencia con la carga de arrastrar / soltar HTML. Ya lo tengo habilitado en todo el diseño. @gaearon , ¿pensamientos?

@ffxsam ¿

No lo sé. Tuve que desinstalarlo debido a este problema, así que no podría decirte si sigue siendo un problema, ¡lo siento! Puede cerrar este problema si lo desea.

Hola, me acabo de encontrar con el mismo problema, estaba a punto de abrir un problema pero veo que ya está abierto.
Entonces, la cosa es que donde sea que cree una instancia de ReactDnD, el evento nativo onDrop deja de funcionar.
Tengo el mismo caso de uso, todo el cuerpo es una 'zona de caída' siempre escuchando que se arrastre un archivo, solo estoy usando eventos nativos para ese componente, ya que es una funcionalidad muy simple y sale de la caja. Pero en las vistas, tengo ReactDnD funcionando, el evento de caída no se activa y es gracioso porque no sobrescribe el evento onDragEnter o onDragStart.
¿Alguna pista @kesne @gaearon ? Realmente no quiero desinstalar ReactDnD, es la mejor dependencia de arrastrar y soltar para React con diferencia.

@kesne @gaearon Estoy experimentando el mismo problema que @xavibonell . Básicamente estoy usando React DND con Wordpress y el cargador de medios de wordpress usa eventos de caída nativos para la carga de archivos. Su devolución de llamada onDrop no se activa, solo cuando se usa ReactDND en la aplicación. Eliminar los objetivos de colocación de Reactdnd resuelve el problema. He pasado varios meses en el proyecto y reactdnd es una parte fundamental del mismo y se ha utilizado ampliamente. Definitivamente no puedo permitirme mudarme a otra biblioteca en este momento. De este hilo, así como de informes similares en Stack Overflow, veo que este problema ha estado ahí durante bastante tiempo. Cualquier solución a esto será muy apreciada.

Sí, es probable que haya una mala interacción entre los elementos dnd nativos y personalizados. No tengo mucho tiempo para investigar el problema actualmente, pero estoy planeando reservar algo de tiempo para este proyecto, y este será uno de los primeros problemas que analizaré.

Si puede, sería muy útil obtener una configuración de repositorio mínima con un ejemplo de reproducción para que podamos intentar descubrir la mejor manera de manejar esto.

@kesne Muchas gracias por su respuesta y me
Mientras tanto, parece que he imaginado un truco temporal, todavía no lo he probado a fondo, pero parece que funciona por ahora. Noté que había funciones setup () y teardown () en HTML5Backend, que vinculaban a todos los oyentes de eventos al elemento de ventana. En mi caso, el cargador de archivos de wordpress es un cuadro modal que ocupa toda la pantalla y, por lo tanto, no se pueden arrastrar o soltar elementos de ReactDND cuando el modal está abierto. Entonces, durante el evento abierto de la ventana modal, llamo a la función teardown () en la instancia del backend (disponible a través de DragDropManager) y durante el cierre modal, llamo a la función setup (). Esto parece funcionar bien, pero ¿podría informarme si volver a llamar a las funciones de desmontaje y configuración puede causar otros problemas con ReactDND en componentes existentes o recién renderizados?

este es el problema: https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452

basado en el comentario del código, "No mostrar un cursor agradable", parece que trata e.dataTransfer.dropEffect solo como una propiedad de visualización. pero, establecer dropEffect en none realidad parece evitar que los archivos se eliminen todos juntos. Vale la pena señalar que configurarlo en move , copy o link funciona bien. esto está en Chrome 55.0.2.

de hecho, podemos replicar esto fuera de react-dnd todos juntos. He creado un violín que aísla el problema: https://jsfiddle.net/ypr6os00/8/

el artículo de MDN para dropEffect parece sugerir que effectAllowed es funcional mientras que dropEffect debería ser presentacional. aunque el violín habla por sí solo ...

editar: este es el mismo problema que https://github.com/gaearon/react-dnd-html5-backend/issues/25

Puedo confirmar eso en mi caso, simplemente comentando e.dataTransfer.dropEffect = 'none'; (en https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend2.js## ) solucionó mi problema de react-dnd que interfiere con mis eventos de caída de Dropzone.

Como referencia, tengo una configuración similar a la siguiente:

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

En el cual DropTargetComponent = DropTarget(TYPE, target, collect)(Component) y DragSourceComponent = DragSource(TYPE, source, collect)(Component) .

¿Existe algún efecto secundario conocido de este parche o una mejor solución disponible? De lo contrario, ¿esto podría fusionarse para siempre?

Gracias por todo el gran trabajo y gracias a @ kn0ll por encontrar una solución.

[EDITAR]
Hice una bifurcación de Github y un paquete npm hasta que este problema se resuelva en el proyecto principal, si eso es útil para alguien.

gracias por la solución

Encontré que el uso del ejemplo react-dropzone para zonas de salto anidadas funcionó. detiene la propagación, que supongo que es el problema. esa fue mi solución hasta que encontré este problema hoy

Estoy experimentando este mismo problema. Dada la idea de las zonas de caída anidadas, terminé envolviendo mi componente de carga de cualquier cosa dentro de un div y agregué la propiedad onDragOver a ese div, que simplemente detiene la propagación. Esto pareció hacer que funcionara en mi caso, aquí está el ejemplo (estaba usando Filepond):

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

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

Sin embargo, no le gusta la idea de que react-dnd pueda interferir tanto en la funcionalidad de d & d en otros componentes. Parece un gran percance, donde algún componente que usa react-dnd para los nodos DOM de d & d puede romper la funcionalidad de caída de archivos de d & d en otro componente. +1 por arreglar esto en la biblioteca

¿Quizás alguna solución rápida podría ser que el efecto de caída se pueda especificar de alguna manera a través de alguna cadena de accesorios?

Terminé usando @silvainSayduck fork para el backend HTML5. esto funciona para mi. lástima que este error no se solucione directamente en react-dnd, pero al menos hay una solución

¿Alguna posibilidad de que haya una solución para esto pronto? @silvainSayduck, ¿ podrías abrir una solicitud de extracción para tu solución?

Creé una solicitud de extracción desde mi repositorio, no estoy seguro de que esto sea de mucha ayuda (ya que todavía no tengo idea si comentar que una línea tiene efectos secundarios no deseados, o incluso si soluciona el problema para todos los casos de uso).

1239

@darthtrevino, ¿te importaría participar como colaborador de este proyecto?

Echando un vistazo a las relaciones públicas, parece razonable, solo tendré que verificar que no arruina los ejemplos

Fusionado en # 1240

¡Muchas gracias @darthtrevino! ¿Cuándo se lanzará en la versión npm?

Al final del día, cuando tengo tiempo para este proyecto, mi flujo de trabajo habitual es trabajar en un lote de PR y luego cortar una versión.

@darthtrevino, ¿ está disponible en la versión actual? ¿Cuándo estará disponible?

Creo que está en la versión actual, sí. Avísame si tienes problemas

@darthtrevino gracias, está disponible.

Estoy experimentando este mismo problema. Dada la idea de las zonas de caída anidadas, terminé envolviendo mi componente de carga de cualquier cosa dentro de un div y agregué la propiedad onDragOver a ese div, que simplemente detiene la propagación. Esto pareció hacer que funcionara en mi caso, aquí está el ejemplo (estaba usando Filepond):

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

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

Sin embargo, no le gusta la idea de que react-dnd pueda interferir tanto en la funcionalidad de d & d en otros componentes. Parece un gran percance, donde algún componente que usa react-dnd para los nodos DOM de d & d puede romper la funcionalidad de caída de archivos de d & d en otro componente. +1 por arreglar esto en la biblioteca

¿Quizás alguna solución rápida podría ser que el efecto de caída se pueda especificar de alguna manera a través de alguna cadena de accesorios?

add event.stopPropagation() en handleDragOver [Dropzone] soluciona el problema en mi caso. gracias @vileppanen

Este hilo me salvó la vida

Para aquellos que experimentan este problema donde <Dropzone /> está dentro de un componente react-dnd , la misma solución funciona: envolver <Dropzone /> en un <div onDragOver={e=> e.stopPropagation() /> con onDragOver utilizado para detener la propagación.