J'ai eu le problème inverse. Pour faire fonctionner le backend HTML5 avec dropzone, je devais faire:

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

et

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

Ma dropzone est montée sur le corps et vous voudrez peut-être jouer avec l'ordre de montage.
Je pense que le faire à l'échelle du corps et ensuite prendre des mesures en fonction de l'endroit où vous déposez le fichier pourrait être la voie à suivre si rien d'autre ne fonctionne.

J'ai également rencontré un problème où l'élément déplaçable a un <input> , et si l'utilisateur sélectionne / traîne à l'intérieur, il fait glisser l'élément. Je peux probablement simplement retourner false de canDrag si l'entrée est focalisée, et cela devrait faire l'affaire.

Je ne sais pas comment gérer les interférences avec le téléchargement HTML par glisser / déposer. Je l'ai déjà activé sur l'ensemble de la mise en page. @gaearon , des pensées?

@ffxsam Est-ce toujours un problème pour vous?

Je ne sais pas. J'ai dû le désinstaller à cause de ce problème, donc je ne peux pas vous dire si c'est toujours un problème - désolé! Vous pouvez fermer ce problème si vous le souhaitez.

Salut, je viens de rencontrer le même problème, j'étais sur le point d'ouvrir un problème mais je vois qu'il est déjà ouvert.
Le fait est que partout où vous instanciez ReactDnD, l'événement onDrop natif cesse de fonctionner.
J'ai le même cas d'utilisation, le corps entier est une `` zone de dépôt '' toujours à l'écoute d'un fichier à glisser, j'utilise juste des événements natifs pour ce composant car il s'agit d'une fonctionnalité très simple et sort de la boîte. Mais sur les vues sur lesquelles ReactDnD fonctionne, l'événement de suppression n'est pas déclenché et est drôle car il n'écrase pas l'événement onDragEnter ou onDragStart.
Un indice @kesne @gaearon ? Je ne veux vraiment pas désinstaller ReactDnD, c'est de loin la meilleure dépendance glisser-déposer pour React.

@kesne @gaearon Je rencontre le même problème que @xavibonell . J'utilise essentiellement React DND avec Wordpress et le téléchargeur de médias wordpress utilise des événements de dépôt natifs pour les téléchargements de fichiers. Son rappel onDrop n'est pas déclenché, uniquement lorsque ReactDND est utilisé dans l'application. La suppression des cibles de dépôt Reactdnd résout le problème. J'ai passé plusieurs mois sur le projet et reactdnd est au cœur de celui-ci et a été largement utilisé. Je ne peux certainement pas me permettre de déménager dans une autre bibliothèque à ce stade. À partir de ce fil ainsi que de rapports similaires dans Stack Overflow, je vois que ce problème existe depuis un certain temps. Toute solution à cela sera très appréciée.

Oui, il est probable qu'il y ait une mauvaise interaction entre les éléments dnd natifs et personnalisés. Je n'ai pas beaucoup de temps pour me pencher sur la question actuellement, mais je prévois de réserver du temps pour ce projet, et ce sera l'un des premiers problèmes que j'examinerai.

Si vous le pouvez, il serait très utile d'obtenir une configuration de dépôt minimale avec un exemple de reproduction afin que nous puissions essayer de trouver la meilleure façon de gérer cela.

@kesne Merci beaucoup pour votre réponse et il est bon de savoir que vous allez vous pencher sur ce problème. Je vais certainement créer un exemple en direct pour vous et publier un lien ici au plus tôt.
En attendant, je semble avoir figuré un hack temporaire, je ne l'ai pas encore testé à fond, mais semble faire l'affaire pour le moment. J'ai remarqué qu'il y avait des fonctions setup () et teardown () dans HTML5Backend, qui liaient tous les écouteurs d'événements à l'élément window. Dans mon cas, le téléchargeur de fichiers wordpress est une boîte modale qui occupe tout l'écran et donc aucun élément ReactDND ne peut être glissé ou déposé lorsque le modal est ouvert. Ainsi, pendant l'événement d'ouverture de la fenêtre modale, j'appelle la fonction teardown () sur l'instance du backend (disponible via DragDropManager) et lors de la fermeture modale, j'appelle la fonction setup (). Cela semble fonctionner correctement, mais pourriez-vous s'il vous plaît me faire savoir si le fait d'appeler à nouveau les fonctions de démontage et de configuration peut causer d'autres problèmes avec ReactDND sur des composants existants ou nouvellement rendus?

c'est le problème: https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452

basé sur le commentaire du code, "Ne pas afficher un curseur sympa", il semble qu'il traite e.dataTransfer.dropEffect uniquement comme une propriété d'affichage. mais, définir dropEffect sur none semble en fait empêcher les fichiers d'être supprimés tous ensemble. il convient de noter que le définir sur move , copy ou link fonctionne très bien. c'est dans Chrome 55.0.2.

nous pouvons en fait reproduire cela en dehors de react-dnd tous ensemble. J'ai créé un violon qui isole le problème: https://jsfiddle.net/ypr6os00/8/

l' article de MDN pour dropEffect semble suggérer que effectAllowed est fonctionnel tandis que dropEffect devrait être de présentation. le violon parle de lui-même cependant ...

edit: c'est le même problème que https://github.com/gaearon/react-dnd-html5-backend/issues/25

Je peux confirmer que dans mon cas, en commentant simplement e.dataTransfer.dropEffect = 'none'; (à https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Back2.js ) a corrigé mon problème d'interférence de react-dnd avec mes événements Dropzone.

Pour référence, j'ai une configuration similaire à la suivante:

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

Dans laquelle DropTargetComponent = DropTarget(TYPE, target, collect)(Component) et DragSourceComponent = DragSource(TYPE, source, collect)(Component) .

Y a-t-il des effets secondaires connus de ce correctif ou une meilleure solution disponible? Sinon, cela pourrait peut-être être fusionné pour de bon?

Merci pour l'excellent travail et merci @ kn0ll d' avoir

[ÉDITER]
J'ai créé un fork Github et un package npm jusqu'à ce que ce problème soit résolu dans le projet principal, si cela est utile à quiconque.

merci pour la solution de contournement

J'ai trouvé que l'utilisation de l'exemple react-dropzone pour les zones de dépôt imbriquées fonctionnait. il arrête la propagation, ce qui, je suppose, est le problème. c'était ma solution de contournement jusqu'à ce que je trouve ce problème aujourd'hui

Je rencontre le même problème. Compte tenu de l'idée des dropzones imbriquées, j'ai fini par envelopper mon composant de téléchargement dans un div et ajouté la propriété onDragOver à ce div, ce qui arrête simplement la propagation. Cela a semblé le faire fonctionner dans mon cas, voici l'exemple (j'utilisais Filepond):

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

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

Cependant, je n'aime pas l'idée que react-dnd puisse interférer autant sur la fonctionnalité d & d sur d'autres composants. Cela semble être un énorme accident, où certains composants utilisant react-dnd aux nœuds DOM d & d peuvent interrompre la fonctionnalité de suppression de fichiers d & d dans un autre composant. +1 pour résoudre ce problème dans la bibliothèque

Peut-être qu'une solution rapide pourrait être, que le dropEffect puisse être spécifié d'une manière ou d'une autre via une chaîne d'accessoires?

J'ai fini par utiliser @silvainSayduck fork pour le backend HTML5. ça marche pour moi. dommage que ce bogue ne soit pas corrigé directement dans react-dnd, mais au moins il y a une solution de contournement

Y a-t-il une chance qu'il y ait bientôt une solution à ce problème? @silvainSayduck pourriez-vous peut-être ouvrir une pull request pour votre correctif?

J'ai créé une pull request à partir de mon dépôt, je ne suis pas sûr que cela soit d'une grande aide (car je n'ai toujours aucune idée si le commentaire d'une ligne a des effets secondaires indésirables, ou même si cela résout le problème pour tous les cas d'utilisation).

1239

@darthtrevino vous dérangerait-il de participer en tant que contributeur à ce projet?

En jetant un œil au PR, ça a l'air raisonnable, je vais juste avoir besoin de vérifier qu'il ne se fout pas avec les exemples

Fusionné dans # 1240

Merci beaucoup @darthtrevino! Quand est-ce que cela va être publié dans la version npm?

À la fin de la journée - quand j'ai le temps pour ce projet, mon flux de travail habituel est de travailler sur un lot de PR, puis de couper une version.

@darthtrevino est-il disponible dans la version actuelle? quand il sera disponible?

Je crois que c'est dans la version actuelle, oui. Faites-moi savoir si vous rencontrez des problèmes

@darthtrevino merci, il est disponible.

Je rencontre le même problème. Compte tenu de l'idée des dropzones imbriquées, j'ai fini par envelopper mon composant de téléchargement dans un div et ajouté la propriété onDragOver à ce div, ce qui arrête simplement la propagation. Cela a semblé le faire fonctionner dans mon cas, voici l'exemple (j'utilisais Filepond):

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

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

Cependant, je n'aime pas l'idée que react-dnd puisse interférer autant sur la fonctionnalité d & d sur d'autres composants. Cela semble être un énorme accident, où certains composants utilisant react-dnd aux nœuds DOM d & d peuvent interrompre la fonctionnalité de suppression de fichiers d & d dans un autre composant. +1 pour résoudre ce problème dans la bibliothèque

Peut-être qu'une solution rapide pourrait être, que le dropEffect puisse être spécifié d'une manière ou d'une autre via une chaîne d'accessoires?

ajouter event.stopPropagation() sur handleDragOver [Dropzone] corrige le problème dans mon cas. merci @vileppanen

Ce fil m'a sauvé la vie

Pour ceux qui rencontrent ce problème où <Dropzone /> est à l'intérieur d'un composant react-dnd , la même solution fonctionne - enveloppant <Dropzone /> dans un <div onDragOver={e=> e.stopPropagation() /> avec onDragOver utilisé pour arrêter la propagation.