javascript - HTML 5 拖动事件 : 'dragleave' fired after 'dragenter'

Question

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

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

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

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

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

事件的预期顺序是，

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

我假设这是顺序，因为项目必须在进入 B 之前离开 A。我在这里错过了什么吗？ 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.dragenter 在 A.dragleave 之前被触发这一事实使您可以了解 A.dragleave 中的拖动方向处理程序。

事实上，我只是意识到您的用例也是如此:您可以将 A 留空(左上-下)或转到 B(右)。

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

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