HTML 5拖动事件：＆＃39; dragleave＆＃39;在＆＃39; dragenter＆＃39;之后解雇

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 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之前B.dragenter被解雇的事实让你能够意识到A.dragleave中拖拽的方向处理程序。

其实我刚刚认识到，同样也适用于您的使用情况：你可以留下来的空白（左上下）还是要到B（右）

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

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