dragendイベントとdropイベントの間に定義された順序がありますか？

debugcn 投稿 Dev

robertjlooby：

HTML5ドラッグアンドドロップAPI のドキュメントによると、要素がドロップされると2つのイベントが発生します。

dropイベントは、ドロップターゲットから発射されます
dragendイベントは、ドラッグのソースから発射されます

簡単なテスト（スニペットを参照）を実行すると、dropイベントは常にイベントの直前にdragend（少なくともChromeでは）起動しますが、仕様でこれらのイベントの順序について何も見つかりません。

これらのイベントの順序は定義されていますか、それともどちらの順序でも自由に起動できますか？

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    console.log("drop at " + Date.now());
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

function dragend(ev) {
    console.log("dragend at " + Date.now());
}

#div1 {
  background-color: red;
  height: 100px;
  width: 100px;
}
#drag1 {
  background-color: green;
  height: 50px;
  width: 50px;
}

<div>Drag the green square in to the red one</div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" width="100px" height="100px"></div>

<div id="drag1" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)" width="50px" height="50px">

Robby Cornelissen：

現在の（2017年5月8日更新）HTML仕様で指定されているドラッグアンドドロップ処理モデルに従って、drop()イベントはイベントの前に発生する必要がありdragend()ます。

対応する情報はドキュメント内で深くネストされていますが、ドラッグ操作の終了を説明するセクションは次のようになります（省略および強調は私のものです）：

それ以外の場合、ユーザーがドラッグアンドドロップ操作を終了した場合（たとえば、マウス駆動のドラッグアンドドロップインターフェイスでマウスボタンを離した場合）、またはdragイベントがキャンセルされた場合、これが最後の反復になります。次の手順を実行してから、ドラッグアンドドロップ操作を停止します。

[...]
そうでない場合、ドラッグ操作は成功する可能性があります。次のサブステップを実行します。

ドロップを真実にしましょう。

現在のターゲット要素がDOM要素である場合、その名前dropでDNDイベントを発生させます。それ以外の場合は、ドロップを示すためにプラットフォーム固有の規則を使用します。

[...]

dragendソースノードで指定されたDNDイベントを起動します。

[...]