dragexitとdragleaveはどちらを使うべきですか？

Question

HTMLドラッグアンドドロップAPIは、2つの非常によく似たイベントdragleaveとdragexitを定義しています。これはdragenterと一緒に、現在のドロップターゲットを追跡するのに役立ちます。

クイック検索では、2つのイベント、別のものと別のものを使用する必要があるときの最新の明確な文書は表示されませんでした。

• 各イベントが発生したことになっているときのHTML specification詳細な説明をしているが、それは、いくつかの暗号解読が必要です。

  私は私がこれまでに見つかったリソースを共有します。

• MDNドキュメント（HTML Drag and Drop APIおよび個々のdragexit/dragleaveページ）は言って、助けの多くではありません「要素は、もはやドラッグ操作の直接の選択対象であるときのdragExitイベントがトリガされません。」/"dragleaveイベントは、ドラッグされた要素またはテキスト選択が有効なドロップターゲットを残したときに発生します。"とdragexit（2017-03現在）のブラウザサポートに関する情報がありません
• Dottoro's dragexit docs（Googleの別のトップヒットの1つ）は古くなっていると主張し、「dragexitイベントはFirefox 3.5では廃止されました。代わりにondragleaveイベント。そこに参照さ
• Mozilla's bug 619703とW3C bug 11568これら二つのイベントの歴史にいくつかの光を当てる：dragexit火災：IEは、少なくとも主な違いは、イベントの順序であること、dragleaveを実現しながらのGecko/Firefoxが最初にdragexitを実装するように
  • が見えます対応する前にdragenter、dragleave、混乱して、後に発生します。
  • HTML5仕様では最初はIEのセマンティクスでdragleaveしか定義されていませんでしたが、後で（〜2013）はdragexitをMozillaのセマンティクスで追加しました。
  • GeckoはFirefox 3.5（2009）ではdragexitと同義ですが、後で（4.0、〜2011？）と同義語に変更しているようですが、dragleaveが実装されているようです。
  • caniuse
  は、HTMLドラッグ＆ドロップAPIは、多かれ少なかれ最新ブラウザでサポートされていることを示しているが、私はChromeでそれをMDNからコードサンプルを採取し走っている。具体的

Answer 1

dragexitについては何も言いません。 57.0.2987.110とFirefox 52.0.2。

Firefoxのイベントシーケンスは、dragExitを

dragleave

ドロップ

1. である。しかしChromeはdragexitイベントを発射したことはありません。

   クロームイベントシーケンスである

   1. dragleave
   2. ドロップ

   さらなる分析dragexitイベントで、私はそれが言うのMozilla XUL eventsの一部だとウィキペディアで判明：

   は共通/ W3Cのイベントに加えて、Mozillaはあなたがコードスニペットを必要とする場合にはXUL要素

   でのみ動作するイベントの集合を定義し、ここではplunkrからdragexitとdragleaveイベントスニペットです。

   document.addEventListener("dragexit", function(event) { 
       console.log(event.type); 
       // reset the transparency 
       event.target.style.opacity = ""; 
   }, false); 
   
   document.addEventListener("dragleave", function(event) { 
       console.log(event.type); 
       // reset background of potential drop target when the draggable element leaves it 
       if (event.target.className == "dropzone") { 
       event.target.style.background = ""; 
       } 
   
   }, false); 
   

   は、ドラッグ＆ドロップAPIは完全に完全にすべてのブラウザでサポートされていないdragexitイベントを使用せずに実現できることを示して興味深いtutorialがあります。あなたの安全な賭けは、代わりにすべての主要なブラウザでサポートされているdragleaveイベントを使用することです。