dragend 和 drop 事件之间是不是有定义的顺序？

Posted 2023-05-08

【中文标题】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)"  ></div>

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

【问题讨论】：

火狐的顺序是一样的

【参考方案1】：

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

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

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

[...] 否则，拖拽操作可能会成功；运行这些子步骤：
让dropped为真。 如果当前目标元素是 DOM 元素，则触发一个名为 drop 的 DND 事件；否则，使用特定于平台的 指示下降的约定。 [...]
在源节点触发名为 dragend 的 DND 事件。 [...]