Javascript HTML5拖动事件：'；dragleave'；在'之后开火；德拉根特&x27；

我在一个单页应用程序中使用html5 DrageEvents

目前，我正在收听

dragleave

和

dragenter

事件，以在元素上设置适当的类

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

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

A的牵引器

B的牵引器

dragleave

事件的预期顺序是

A的牵引器

dragleave

B的牵引器

我假设这是顺序，因为项目必须在进入

B

之前离开

A

。我是不是遗漏了什么？在

dragleave

之前触发

dragenter

是否有理由？有没有办法改变这种行为

我有一把叉子

通过收听

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处（右）

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

---

谢谢你的解释。但是，如果我们将盒子稍微分开，并以足够快的速度拖动物品，则“dragEnter”仍会在“dragLeave”之前触发。不确定这是否是浏览器问题，但可以在Chrome中重新创建：嗯，有趣的一点。我想你必须解决这个问题，因为我不认为这是不正确的行为。我认为规范的这一部分是相关的：“如果用户代理在下一次迭代到期时仍在执行序列的上一次迭代（如果有的话），则中止此迭代的这些步骤（有效地“跳过拖放操作的漏帧”）