HTML 5 拖动事件：“dragleave”在“dragenter”之后触发

Question

我在单页应用程序中使用 html5 Dragevents。

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

但是，当两个有效的目标元素（A 和 B）彼此相邻，并且我们将一个元素通过 A 拖入 B 时，事件将按以下顺序触发。

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

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

事件的预期顺序是，

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

我认为这就是顺序，因为该物品必须A在进入之前离开B。我在这里错过了什么吗？dragenter在此之前被解雇有理由吗dragleave？有没有办法改变这种行为？

我这里有一个 JSFiddle 。

代码本身非常简单，dragenter可以dragover听。

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

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