javascript - HTML 5拖动事件: 'dragleave'之后触发 'dragenter'

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

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

但是，当两个有效的目标元素(A和B)彼此相邻，并且我们将元素穿过A拖动到B中时，事件将按以下顺序触发。

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

的

dragenter B的

dragenter

的

dragleave
事件的预期顺序为

的

dragenter

的

dragleave B的

dragenter

我假设这是命令，因为该项目必须在输入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
},

最佳答案

开派对有点晚，但这是我的用例。假设B完全包围在A中:

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

您可以完全将A留在此处，也可以将其留给B留在这里。B.dragenter在A.dragleave之前被解雇的事实使您可以知道A.dragleave处理程序中拖动的方向。

实际上，我只是意识到您的用例也是如此:您可以将A留在空白处(从左至上)，也可以将B留在空白处(右)。

请注意，以上是我对“为什么”的解释。行为本身已由规范的此部分确认:

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