web-dev-qa-db-ja.com

dragendイベントをすぐに起動する方法

ドラッグ可能な領域の外にドラッグしたときに、 dragend イベントをすぐに発生させる問題を解決しようとしています。たとえば、次のビデオに注意してください。タグをドラッグ可能領域の外にドラッグすると、約0.25秒の遅延があります（タグ内にある場合は、すぐに登録されます）。 https://gyazo.com/18d1afc32eb065d1f35896697ef0479e 。

そしてこれがJSFiddleです： http://jsfiddle.net/radonirinamaminiaina/zfnj5rv4/ 。

この質問は約7年前にここで尋ねられました： HTML5 dragendイベントがすぐに発生します ですが、これは尋ねられたときのブラウザー制限のようであり、私の質問はかなり異なると思います。

ドラッグ可能な領域の外にドラッグされたときにイベントをすぐに発生させる方法はありますか？たとえば、jfiddleの例で、「このdivはドラッグ可能」をブラウザーの左上隅にドラッグすると、遅延なしで「スナップバック」しますか？

コメント内の質問からの更新：Excelのピボットテーブルからの4秒のビデオを使用して、私がやろうとしていることの例です：gyazo .com/3ccd1c3abd7f92d3410022a83b5c25b9。基本的に、ユーザーがタグを「ドラッグゾーンの外」にドラッグすると、そのタグをすぐに削除したり、タグが削除されたことを示すアニメーションをトリガーしたりできます。

javascriptbrowserdom-events
3
David542

そのような要素をドロップするときに、dragendイベントを自分で発生させることができます。

document.addEventListener("drop", function( event ) {
    event.preventDefault();

    // currentTarget refers to document because I added the listener on it.
    event.currentTarget.dispatchEvent(new Event('dragend'));
}, false);

これがアニメーションを削除するかどうかをテストすることはできません。MacOSが原因であると思われるためです。

また、これによりイベントdragendが2回発生する可能性があります。

これがお役に立てば幸いです。

0
Draityalan