dragend 和 drop 事件之间是否有定义的顺序？答案

【问题标题】：Is there a defined ordering between dragend and drop events?dragend 和 drop 事件之间是否有定义的顺序？
【发布时间】：2016-11-01 21:22:12
【问题描述】：

根据 HTML5 拖放 API 中的the documentation，当元素被拖放时会触发两个事件：

从放置目标触发drop 事件
从拖动源触发dragend 事件

在做一个简单的测试（见 sn-p）时，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">

【问题讨论】：

火狐的顺序是一样的

标签： javascript html drag-and-drop

【解决方案1】：

根据当前（2021 年 6 月 8 日更新）HTML 规范中指定的drag-and-drop processing model，drop() 事件必须在dragend() 事件之前触发。

相应的信息在文档中嵌套很深，但是描述拖拽操作结束的部分看起来如下（我的省略和强调）：

否则，如果用户结束拖放操作（例如，通过在鼠标驱动的拖放界面中释放鼠标按钮），或者如果drag 事件被取消，那么这将是最后一次迭代。运行以下步骤，然后停止拖放操作：

[...]
否则，拖拽操作可能会成功；运行这些子步骤：

让dropped为真。

如果当前目标元素是 DOM 元素，则触发一个名为 drop 的 DND 事件；否则，使用特定于平台的指示下降的约定。

[...]

在源节点触发名为 dragend 的 DND 事件。

[...]

【讨论】：