React-dnd: ReactDnDはChrome59では機能しません

そうではありません。 それは完全にうまく機能します。 拡張機能なしでChromeを実行してみてください

@theTechie WindowsのMacでチェックしましたか？ Macでは正常に動作しています。

Macでチェックしました。 特定のプラットフォームに問題がありますか？

@theTechie何らかの理由で、react-dndは通常どおり「dragend」をトリガーしません。 私はカップルマシンでテストしました。1台のMacで同じ問題が発生し、すべてのWindowsでこの問題が発生します。 何か考えはありますか？

Chrome上の複数のプラットフォームWindows8.1 / Windows 7と、IE10およびIE11でテストしました。これで問題なく動作します。

@ hunterbmt-コンソールにエラーが表示されますか？ コンテキストに応じてGIFを共有できますか？

@theTechie私は
ブラウザがしばらくしてトリガーしなかった場合、「ドロップ」の後に「ドラッグ」を手動でトリガーすることで修正しました。
他の人もこの問題に失敗したかどうかはわかりません。その場合は、修正をreact-dndに移すことができます。

Chrome 59の変更ログを確認しましたが、何も見つかりませんでした。何か洞察があれば、入力をいただければ幸いです。

@hunterbmtそれはあなたのコードに特有のものかもしれないと思います。 私もreact-dndを複数のインスタンスで使用しており、それらはすべてChrome59で正常に動作します。

残念ながら、なぜこれが起こるのかをお話しすることはできません。 たぶん、ここでコードを共有してもよければ、何かを見つけてみることができます。

WindowsのChrome59.0.3071.86でも同じ問題が発生します。 Firefoxでは正常に動作し、以前のChromeバージョンでは正常に動作しました。 package.json：

{
  "dependencies": {
    "react-dnd": "2.1.4",
    "react-dnd-html5-backend": "2.1.2",
  }
}

結果は2.4.0 / 2.4.1と同じです

このハックで解決：

const ModifiedBackend = (...args) => {
    const instance = new HTML5Backend(...args);

    // Fix Chrome 59 not sending a DragEnd after Drop, which other browsers do and react-dnd expects
    const originalTopDrop = instance.handleTopDrop;
    const originalTopDragEndCapture = instance.handleTopDragEndCapture;
    let dragEndTimeout;
    instance.handleTopDrop = (e, ...args) => {
        dragEndTimeout = setTimeout(() => {
            originalTopDragEndCapture(e, ...args);
        }, 0);
        originalTopDrop(e, ...args);
    };
    instance.handleTopDragEndCapture = (e, ...args) => {
        clearTimeout(dragEndTimeout);
        originalTopDragEndCapture(e, ...args);
    };

    return instance;
};

// Decorate root elements with this
export default DragDropContext(ModifiedBackend);

@awestroke非常によく似たハックになりますが、ドロップできない領域にすばやくドラッグアンドドロップすると問題が発生します。Chromeは「ドラッグアンド」をトリガーできず、もちろん「ドロップ」もトリガーされません。 横から確認してもらえますか？

@hunterbmtドロップできないエリアにドロップしても問題ありません。 どのイベントがトリガーされるかは確認していませんが、react-dndは破損状態になっていないため、すべてが正常に機能しているようです。

endDragをトリガーする条件を単純化することにより、この問題と潜在的な問題を修正するPRを作成しました
https://github.com/react-dnd/react-dnd/pull/801

毎回ではありませんが、場合によっては同じ問題が発生します。たとえば、その場合は次のようになります。
ドロップエリア内にドロップできるウィジェットがあり、ウィジェットがドロップされると、そのドロップエリアはいくつかのhtmlをレンダリングします。 ビデオウィジェットをドロップすることを選択すると、 iframeがレンダリングされ、壊れて、その後他のウィジェットをドラッグできなくなります（ dragendイベントは発生しません）。 しかし、そのiframeをテキストや画像に置き換えると、完全に正常に機能し、Chrome 59より前に機能し、他のブラウザでも機能します。 Chromeまたはreact-dnd？

@rogyvoje 「dragend」をトリガーするイベントでChromeが何かを変更したと思います。 より多くの情報を検索しようとしましたが、どこにもそれについて言及していないようです。
ところで、「dragstart」の後の「mousemove」に依存することは、ほとんどの場合「dragend」に依存し、場合によっては「mousemove」（DOMから削除されたドラッグ要素）をPRとして使用するよりも意味があり簡単です。

@hunterbmt謎を
しかし、どうすればnpm / yarnを介してプルリクエストを使用できますか？ マージされていないようですが、間違っているのでしょうか？ 😕

@rogyvojeバージョンの代わりに、私のブランチを直接指すことができると思います。 PRはマージされましたが、react-dndはまだ新しいバージョンがリリースされていないため、react-dnd npm / yarnから直接取得することはできません。

@hunterbmt
私はこのようにそれをやろうとしました：

npm install git+https://github.com/react-dnd/react-dnd.git#41eb8caa0bc106c9edf0d3ca628b49e70525090b

しかし、ログイン画面は常にポップアップします😕

このスレッドの誰かが問題の再現可能なケースを提供できますか？ 私が使用していますreact-dnd多くのことを私はどこ再現性のあるケースを持っていることは非常に興味があるので、私は、クロム59上の任意の問題を特定することはできませんreact-dndクローム59は発生しませんので、失敗したdrag/dropイベントは正しく。

問題がある場合は、そもそも問題を見た方も簡単に再現できるはずですので、時間をかけて再現可能なケースを投稿してみてください（githubリポジトリやここに投稿されたコードの場合もあります） https://codesandbox.io/）、意味のある情報（OS、react-dndのバージョンなど）を提供してみてください。 thnks！

@bjrmatosここで、私は1つ作成しました。これは私の場合であり、役立つことを願っています。

https://github.com/rogyvoje/react-dnd-chrome-59

Chrome59と現在のアップデートでテストしました。
バージョン60.0.3112.78（公式ビルド）（64ビット）

Windows情報について：
OS名：Microsoft Windows 10 Pro
OSバージョン：10.0.14393 N / Aビルド14393

Chromeでテスト済み：バージョン55.0.2883.87（64ビット）（Linux / Mint 18）で、完全に動作します...

@rogyvoje thnks！ 後で見ていきます。Windows7VMで問題が発生するかどうかを確認しましょう。そうでない場合は、Windows10で別のVMを試してみます。

こんにちは@rogyvoje私はあなたがそこに同じ問題を抱えているとあなたが言ったように最新のクロームリリースで直接あなたのリポジトリを試しました（バージョン60.0.3112.78（公式ビルド）（64ビット）-Windows 10PRO）が私は見ませんエラー。

これは期待される結果ですよね？

問題を再現するための他の手順はありますか？

（ yarnを使用する代わりに） [email protected]を使用して依存関係をインストールしましたが、ここに記録するために、インストールされている依存関係の正確なバージョンを示します。

注：私はWindows 10 PRO VMを使用しています（私のメインOSはOSX El Capitanであり、Chromeの問題は存在しないため）

すべてのChrome拡張機能を無効にしても同じ結果になります。

@rogyvoje過去のコメントを読んだばかりで、最初のドラッグが機能すると言うように、問題を再現できますが、誰かがCannot call hover after dropエラーが表示されます。

リポジトリに感謝します。私は問題を掘り下げて、みんなを幸せにする解決策を探します。

バグが確認されたようです： https ：

https://stackoverflow.com/questions/44764343/dragend-event-not-firing-in-chrome-when-an-iframe-is-moved-in-drop-function

記録として、Chrome（60）Mac OS（El Capitan）でも同じ

@bjrmatos素晴らしい、あなたがそれをうまく再現できてうれしいです😄
次に何が起こるかわからないので、Chrome 61を待つ必要がありますか？ 😂

次に何が起こるかわからないので、Chrome 61を待つ必要がありますか？

とにかく、Chrome 59、60でreact-dndを機能させる素敵なパッチを見つけようとしているので、後でさらに更新をここに投稿します👍

これで問題は解決すると思います。 https://github.com/react-dnd/react-dnd/pull/820
すでにマージされていますが、リリースされていません。

この問題に関するニュースはありますか？
最新のChromeでまだ問題が発生しています...

@ ms88privat ＃820は例外を解決しますが、Chromeで（私は67を使用しています）iframeがレンダリングされたときにsource.endDragが呼び出されないという最初の問題は解決しません。

3.0より前では、 @ 0rvarによって提供される回避策を使用していましたが、より厳密なTS型指定では、インスタンスメソッドまたはプライベートクラスメソッドをオーバーライドすることはできません。

@rogyvojeのテストリポジトリのVideo.jsにendDragを追加することで、それを再現できます。

const source = {
    beginDrag(props) {
        return {
            renderVideo: true
        };
    },
    // Add end drag
    endDrag(props, monitor) {
        if (!monitor) return;
        // Only gets called when the iframe is already rendered
        console.log("endDrag");
    }
};

初めてドラッグするときは、ChromeではendDragは呼び出されません。

chrome内のページのiframeに含めるとフリーズします（現在まで59） @ 0rvarの修正はこの場合も機能します

これは、昨日リリースされたchrome72で修正されました。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。