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

Question

根据HTML5拖放API 的文档,删除元素时会触发两个事件:

1. 一个drop事件是由放置目标发射
2. 一个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">

Answer 1

按照拖动和拖放处理模型在目前的规定(更新2017年5月8日)HTML规范,该drop()事件必须触发前的dragend()事件.

相应的信息深深地嵌套在文档中,但描述拖动操作结束的部分如下所示(省略和强调我的):

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

1. [...]
   否则,拖动操作可能会成功; 运行这些子步骤:
   1. 让我们放弃.
   2. 如果当前目标元素是DOM元素,则触发以其命名的DND事件drop; 否则,使用特定于平台的约定来指示丢弃.
   3. [...]
2. 触发dragend在源节点上命名的DND事件.
3. [...]