Eu tive o problema oposto. Para fazer o back-end HTML5 funcionar com dropzone, eu tive que fazer:

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

e

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

Minha dropzone é montada no corpo e você pode querer brincar com a ordem de montagem.
Acho que ampliá-lo para todo o corpo e, em seguida, agir com base em onde você solta o arquivo pode ser o caminho a percorrer se nada mais funcionar.

Também tive um problema em que o item arrastável tem um <input> e, se o usuário selecionar / arrastar dentro dele, ele arrastará o item. Provavelmente, posso retornar false de canDrag se a entrada estiver focada, e isso deve resolver o problema.

Não tenho certeza de como lidar com a interferência no upload de arrastar / soltar HTML. Já habilitei em todo o layout. @gaearon , pensamentos?

@ffxsam Isso ainda é um problema para você?

Eu não sei. Tive que desinstalá-lo devido a esse problema, então não posso dizer se ainda é um problema - desculpe! Você pode fechar este problema se desejar.

Olá, acabei de encontrar o mesmo problema, estava prestes a abrir um problema, mas vejo que já está aberto.
Portanto, sempre que você instanciar o ReactDnD, o evento onDrop nativo para de funcionar.
Tenho o mesmo caso de uso, todo o corpo é uma 'zona de soltar' sempre ouvindo um arquivo a ser arrastado, estou apenas usando eventos nativos para esse componente, pois é uma funcionalidade muito simples e sai da caixa. Mas nas visualizações que tenho ReactDnD funcionando, o evento drop não é disparado e é engraçado porque não sobrescreve o evento onDragEnter ou onDragStart.
Alguma pista @kesne @gaearon ? Eu realmente não quero desinstalar o ReactDnD, é de longe a melhor dependência de arrastar e soltar para o React.

@kesne @gaearon Estou tendo o mesmo problema que @xavibonell . Basicamente, estou usando o React DND com Wordpress e o uploader de mídia do wordpress usa eventos de soltar nativos para uploads de arquivos. Seu retorno de chamada onDrop não é disparado, apenas quando ReactDND é usado no aplicativo. Remover os alvos de descarte Reactdnd resolve o problema. Passei vários meses no projeto e a reação é uma parte central dele e tem sido usada extensivamente. Definitivamente, não posso me dar ao luxo de me mudar para outra biblioteca neste momento. Com base neste tópico, bem como em relatórios semelhantes no Stack Overflow, vejo que esse problema já existe há um bom tempo. Qualquer solução para isso será muito apreciada.

Sim, é provável que haja alguma interação ruim entre os elementos dnd nativos e personalizados. Não tenho muito tempo para examinar o problema atualmente, mas estou planejando reservar algum tempo para este projeto, e este será um dos primeiros problemas que examinarei.

Se você puder, seria muito útil obter uma configuração mínima de repo com um exemplo de reprodução para que possamos tentar descobrir a melhor maneira de lidar com isso.

@kesne Muito obrigado pela sua resposta e é bom saber que você analisará este problema. Definitivamente, vou criar um exemplo ao vivo para você e postar um link aqui o mais rápido possível.
Nesse ínterim, parece que descobri um hack temporário, não o testei completamente ainda, mas parece funcionar por enquanto. Percebi que havia funções setup () e teardown () no HTML5Backend, que estavam vinculando todos os ouvintes de evento ao elemento window. No meu caso, o uploader de arquivo wordpress é uma caixa modal que ocupa a tela inteira e, portanto, nenhum elemento ReactDND pode ser arrastado ou solto quando o modal está aberto. Portanto, durante o evento de abertura da janela modal, chamo a função teardown () na instância do back-end (disponível por meio do DragDropManager) e durante o fechamento do modal, chamo a função setup (). Isso parece funcionar bem, mas você poderia me informar se chamar as funções de desmontagem e configuração novamente pode causar outros problemas com ReactDND em componentes existentes ou recém-renderizados?

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

baseado no comentário do código, "Não mostre um cursor bonito", parece que trata e.dataTransfer.dropEffect apenas como uma propriedade de exibição. mas, definir dropEffect como none na verdade, parece evitar que os arquivos sejam descartados todos juntos. vale a pena notar que configurá-lo para move , copy ou link funciona perfeitamente. isso está no Chrome 55.0.2.

podemos realmente replicar isso fora de react-dnd todos juntos. Eu criei um violino que isola o problema: https://jsfiddle.net/ypr6os00/8/

o artigo MDN para dropEffect parece sugerir que effectAllowed é funcional, enquanto dropEffect deve ser de apresentação. o violino fala por si ...

editar: este é o mesmo problema que https://github.com/gaearon/react-dnd-html5-backend/issues/25

Posso confirmar isso no meu caso, simplesmente comentando e.dataTransfer.dropEffect = 'none'; (em https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#s ) corrigiu meu problema de reação-dnd interferindo em meus eventos de dropzone.

Para referência, tenho uma configuração semelhante à seguinte:

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

Em que DropTargetComponent = DropTarget(TYPE, target, collect)(Component) e DragSourceComponent = DragSource(TYPE, source, collect)(Component) .

Existe algum efeito colateral conhecido desse patch ou melhor correção disponível? Caso contrário, isso poderia ser incorporado para sempre?

Obrigado por todo o excelente trabalho e obrigado @ kn0ll por descobrir uma solução alternativa.

[EDITAR]
Fiz um fork do Github e um pacote npm até que esse problema seja resolvido no projeto principal, se isso for útil para alguém.

obrigado pela solução alternativa

Descobri que usar o exemplo de zona de queda reativa para zonas de queda aninhadas funcionou. ele interrompe a propagação, o que presumo ser o problema. essa foi a minha solução alternativa até encontrar este problema hoje

Estou enfrentando o mesmo problema. Dada a ideia de dropzones aninhados, acabei envolvendo meu componente de upload de qualquer coisa dentro de um div e adicionei a propriedade onDragOver a esse div, o que simplesmente interrompe a propagação. Isso pareceu funcionar no meu caso, aqui está o exemplo (eu estava usando o Filepond):

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

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

No entanto, não gosto da ideia de que o react-dnd possa interferir tanto na funcionalidade de d&D em outros componentes. Parece um grande contratempo, onde algum componente usando os nós DOM react-dnd para d & d pode quebrar a funcionalidade de eliminação de arquivos d & d em outro componente. +1 para consertar isso na biblioteca

Talvez alguma solução rápida pudesse ser, que o dropEffect pudesse ser especificado de alguma forma por meio de alguma corrente de suporte?

Acabei usando o fork do @silvainSayduck para o back-end HTML5. funciona para mim. pena que este bug não foi corrigido diretamente no react-dnd, mas pelo menos há uma solução alternativa

Alguma chance de haver uma solução para isso em breve? @silvainSayduck, você poderia abrir uma solicitação de pull para sua correção?

Eu criei uma solicitação pull do meu repo, não tenho certeza se isso é de muita ajuda (já que ainda não tenho ideia se comentar essa linha tem algum efeito colateral indesejado ou mesmo se corrige o problema para todos os casos de uso).

1239

@darthtrevino , você se importaria de contribuir como um colaborador deste projeto?

Dando uma olhada no PR, parece razoável. Eu só preciso verificar se isso não estraga os exemplos

Fundido em # 1240

Muito obrigado @darthtrevino! Quando será lançado na versão npm?

No final do dia - quando eu tiver tempo para este projeto, meu fluxo de trabalho usual é trabalhar em um lote de PRs e, em seguida, cortar uma liberação.

@darthtrevino está disponível na versão atual? quando estará disponível?

Eu acredito que está no lançamento atual, sim. Avise-me se tiver problemas

@darthtrevino obrigado, está disponível.

Estou enfrentando o mesmo problema. Dada a ideia de dropzones aninhados, acabei envolvendo meu componente de upload de qualquer coisa dentro de um div e adicionei a propriedade onDragOver a esse div, o que simplesmente interrompe a propagação. Isso pareceu funcionar no meu caso, aqui está o exemplo (eu estava usando o Filepond):

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

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

No entanto, não gosto da ideia de que o react-dnd possa interferir tanto na funcionalidade de d&D em outros componentes. Parece um grande contratempo, onde algum componente usando os nós DOM react-dnd para d & d pode quebrar a funcionalidade de eliminação de arquivos d & d em outro componente. +1 para consertar isso na biblioteca

Talvez alguma solução rápida pudesse ser, que o dropEffect pudesse ser especificado de alguma forma por meio de alguma corrente de suporte?

add event.stopPropagation() em handleDragOver [Dropzone] corrige o problema no meu caso. obrigado @vileppanen

Este tópico salvou minha vida

Para aqueles que estão tendo esse problema em que <Dropzone /> está dentro de um componente react-dnd , a mesma solução funciona - envolvendo <Dropzone /> em um <div onDragOver={e=> e.stopPropagation() /> com onDragOver usado para parar a propagação.