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

Question

我在单页应用程序中使用 html5 拖动事件。

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

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

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

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

事件的预期顺序是，

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

我假设这将是订单，因为在进入 B 之前，该项目必须离开 A。我在这里错过了什么吗？在dragleave 之前解雇dragenter 是否有理由？有没有办法改变这种行为？

我有一个 JSFiddle here。

代码本身非常简单，只需监听 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。B.dragleave 在 A.dragleave 之前触发 B.dragleave 的事实使您可以了解 A.dragleave 中的拖动方向处理程序。

事实上，我只是意识到您的用例也是如此：您可以将 A 留在空白处（左上-下）或转到 B（右）。

请注意，以上是我对“为什么”有用的解释。规范的这一部分确认了行为本身：

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