HTML 5拖放事件：'dragleave'在'dragenter'之后触发

Question

我正在使用HTML5的拖放事件在单页应用程序中。

目前，我正在监听dragleave和dragenter事件，以在元素上设置正确的类。

但是，当两个有效的目标元素（A和B）相邻时，我们将一个元素从A拖到B时，事件的触发顺序如下。

                     +--------------+-------------+
                     |              |             |
+-------+            |     A        |     B       |
|       |            |              |             |
| Elem  +------------------------------------>    |
|       |            |              |             |
+-------+            |              |             |
                     +--------------+-------------+

1. A 的 dragenter
2. B 的 dragenter
3. A 的 dragleave

预期的事件顺序应该是这样的：

1. A 的 dragenter
2. A 的 dragleave
3. B 的 dragenter

我认为这应该是正确的顺序，因为项目必须在进入 B 之前离开 A。我是否遗漏了什么？为什么 dragenter 会在 dragleave 之前触发？是否有一种方法可以更改这种行为？

我在 JSFiddle 中提供了代码这里。

代码本身非常简单，只需要监听 dragenter 和 dragover 事件即可。

dragenter: function(e) {
    console.log("basket dragenter");
    // logic here
},
dragleave: function(e) {
    console.log("basket dragleave");
    // logic here
},

- nipuna777

Answer 1

有点晚了，但这是我的用例。想象一下B完全包含在A中：

             +---------------------------+
             |  A                        |
             |      +---------------+    |
+-----+      |      | B             |    |
|     |      |      |               |    |
|    -|------|------|--->           |    |
+-----+      |      |               |    |
             |      |               |    |
             |      +---------------+    |
             +---------------------------+

你可以通过完全离开A或将其留下到B来将A留在此处。 B.dragenter在A.dragleave之前被触发的事实允许您在A.dragleave处理程序中了解拖动的方向。实际上，我刚意识到这也适用于您的用例：您可以将A留在空白处（左上下）或去到B（右边）。请注意，上述是我对“为什么”有用的解释。该行为本身由规范的此部分确认：

https://www.w3.org/TR/html51/editing.html#drag-and-drop-processing-model

- kodu

---

感谢说明。但是，如果我们稍微移动一下这些框，并快速地拖动物品，'dragEnter'事件仍会在'dragLeave'之前被触发。不确定这是否是浏览器问题，但在Chrome中可以重新创建此问题：https://jsfiddle.net/po8Ls9z2/。 - nipuna777

嗯，有趣的观点。我想你必须绕过它，因为我认为这不是错误行为。我认为规范的这一部分是相关的：“如果用户代理在下一次迭代到来时仍在执行先前的序列（如果有），则对于此迭代中止这些步骤（有效地“跳过拖放操作的丢失帧”）。” - kodu