私は反対の問題を抱えていました。 HTML5バックエンドをdropzoneで機能させるには、次のことを行う必要がありました。

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

そして

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

私のドロップゾーンはボディに取り付けられているので、取り付け順序を試してみることをお勧めします。
ボディ全体に作成してから、ファイルをドロップした場所に基づいてアクションを実行することが、他に何も機能しない場合の方法になると思います。

また、ドラッグ可能なアイテムに<input>があり、ユーザーがその中を選択/ドラッグすると、アイテムがドラッグされるという問題が発生しました。 入力がフォーカスされている場合は、おそらくcanDragからfalseを返すことができますが、これでうまくいくはずです。

ただし、HTMLのドラッグアンドドロップアップロードの干渉に対処する方法がわかりません。 レイアウト全体ですでに有効にしています。 @gaearon 、考え？

@ffxsamこれはまだあなたにとって問題ですか？

知りません。 この問題のためにアンインストールする必要があったので、それがまだ問題であるかどうかはわかりませんでした-ごめんなさい！ 必要に応じて、この問題を閉じることができます。

こんにちは、私はちょうど同じ問題に遭遇しました、私は問題を開こうとしていました、しかし私はそれがすでに開いているのを見ます。
つまり、ReactDnDをインスタンス化すると、ネイティブのonDropイベントが機能しなくなります。
私は同じユースケースを持っています。全身は常にドラッグされるファイルをリッスンする「ドロップゾーン」です。非常にシンプルな機能であり、箱から出して来るので、そのコンポーネントにネイティブイベントを使用しています。 しかし、ReactDnDが機能しているビューでは、dropイベントは発生せず、onDragEnterまたはonDragStartイベントを上書きしないため面白いです。
手がかり@ kesne @ gaearon ？ 私は本当にReactDnDをアンインストールしたくありません、それはReactの最高のドラッグアンドドロップ依存関係です。

@kesne @ gaearon @ xavibonellと同じ問題が発生しています。 私は基本的にWordpressでReactDNDを使用しており、Wordpressメディアアップローダーはファイルのアップロードにネイティブドロップイベントを使用します。 そのonDropコールバックは、ReactDNDがアプリで使用されている場合にのみ発生しません。 Reactdndドロップターゲットを削除すると、問題が解決します。 私はこのプロジェクトに数か月を費やしましたが、reactdndはその中核部分であり、広く使用されています。 この時点で、私は間違いなく別の図書館に移動する余裕がありません。 このスレッドとStackOverflowの同様のレポートから、この問題はかなり前から存在していることがわかります。 これに対する解決策は大歓迎です。

ええ、ネイティブ要素とカスタムdnd要素の間にいくつかの悪い相互作用がある可能性があります。 現在、この問題を調査する時間はあまりありませんが、このプロジェクトのために時間を取っておくことを計画しており、これは私が最初に調査する問題の1つになります。

可能であれば、これを処理するための最良の方法を見つけ出すことができるように、複製の例を使用して最小限のリポジトリ設定を取得すると非常に便利です。

@kesneご回答ありがとうございます。この問題を調査することを知って、
その間、私は一時的なハックを考え出したようで、まだ徹底的にテストしていませんが、今のところうまくいくようです。 HTML5Backendにsetup（）関数とteardown（）関数があり、すべてのイベントリスナーをウィンドウ要素にバインドしていることに気付きました。 私の場合、ワードプレスファイルアップローダーは画面全体を占めるモーダルボックスであるため、モーダルが開いているときにReactDND要素をドラッグまたはドロップすることはできません。 そのため、モーダルウィンドウのopenイベント中に、バックエンドのインスタンス（DragDropManagerを介して利用可能）でteardown（）関数を呼び出し、モーダルのクローズ中にsetup（）関数を呼び出します。 これは正常に機能しているようですが、ティアダウン関数とセットアップ関数を再度呼び出すと、既存または新しくレンダリングされたコンポーネントでReactDNDに他の問題が発生する可能性があるかどうかを教えてください。

これが問題です： https ：

コードのコメント「素敵なカーソルを表示しないでください」に基づくと、 e.dataTransfer.dropEffectを単なる表示プロパティとして扱っているようです。 ただし、dropEffectをnoneに設定すると、実際にはファイルがすべて一緒にドロップされるのを防ぐように見えます。 move 、 copy 、またはlink設定すると問題なく機能することに注意してください。 これはChrome55.0.2にあります。

実際には、react-dndの外部でこれをすべて一緒に複製できます。 問題を切り分けるフィドルを作成しました： https ：

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.js#L452 ）Dropzoneドロップイベントに干渉するreact-dndの問題を修正しました。

参考までに、次のような設定があります。

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

DropTargetComponent = DropTarget(TYPE, target, collect)(Component)とDragSourceComponent = DragSource(TYPE, source, collect)(Component) 。

このパッチの既知の副作用または利用可能なより良い修正はありますか？ そうでなければ、これはおそらく永久にマージされる可能性がありますか？

すべての素晴らしい作業に感謝し、回避策を見つけてくれた

[編集]
この問題がメインプロジェクトで解決されるまで、 Githubフォークとnpmパッケージを作成しました。

回避策をありがとう

ネストされたドロップゾーンのreact-dropzoneの例を使用すると、うまくいくことがわかりました。 それは伝播を停止しますが、これが問題だと思います。 今日この問題を見つけるまで、それが私の回避策でした

私はこれと同じ問題を経験しています。 ネストされたドロップゾーンのアイデアを考えると、div内にuploading-componentをラップし、その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機能にこれほど干渉する可能性があるという考えは好きではありません。 これは大きな事故のように思われます。react-dndをd＆d DOMノードに使用している一部のコンポーネントが、別のコンポーネントのd＆dファイルのドロップ機能を壊す可能性があります。 ライブラリでこれを修正するための+1

たぶん、いくつかの簡単な解決策は、dropEffectが何らかのプロップチェーンを介して何らかの形で指定される可能性があるということでしょうか？

HTML5バックエンドに@silvainSayduckフォークを使用することに

すぐにこれが修正される可能性はありますか？ @silvainSayduck修正のプルリクエストを開くことができますか？

リポジトリからプルリクエストを作成しましたが、これが大いに役立つかどうかはわかりません（1行に望ましくない副作用があるかどうか、またはすべてのユースケースで問題が修正されたかどうかはまだわかりません）。

1239

@darthtrevinoこのプロジェクトへの貢献者として

PRを見てみると、それが例に合わないことを確認する必要があるだけで合理的に見えます

＃1240に統合

どうもありがとう@darthtrevino！ これはnpmバージョンでいつリリースされる予定ですか？

1日の終わりまでに、このプロジェクトの時間を確保するとき、私の通常のワークフローは、PRのバッチを処理してから、リリースをカットすることです。

@darthtrevinoは現在のリリースで利用できますか？ いつ利用可能になりますか？

ええ、それは現在のリリースにあると思います。 問題が発生した場合はお知らせください

@darthtrevinoありがとうございます、利用可能です。

私はこれと同じ問題を経験しています。 ネストされたドロップゾーンのアイデアを考えると、div内にuploading-componentをラップし、その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機能にこれほど干渉する可能性があるという考えは好きではありません。 これは大きな事故のように思われます。react-dndをd＆d DOMノードに使用している一部のコンポーネントが、別のコンポーネントのd＆dファイルのドロップ機能を壊す可能性があります。 ライブラリでこれを修正するための+1

たぶん、いくつかの簡単な解決策は、dropEffectが何らかのプロップチェーンを介して何らかの形で指定される可能性があるということでしょうか？

handleDragOver [Dropzone]にevent.stopPropagation()を追加すると、私の場合の問題が修正されます。 ありがとう@vileppanen

このスレッドは私の命を救った

<Dropzone />がreact-dndコンポーネント内にあるこの問題が発生している場合は、同じ解決策が機能します- <Dropzone />を<div onDragOver={e=> e.stopPropagation() />でonDragOverラップします伝播を停止するために使用されます。