HTML 5拖动事件:"dragenter"之后触发了"dragleave"

问题描述

我在单个页面应用程序中使用html5 dragevents.

I'm using html5 dragevents in a single page application.

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

Currently, I'm listening to the dragleave and dragenter events to set the proper classes on the elements.

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

But, when two valid target elements(A and B) are next to each other, and we drag an elment through A into B, the events are fired in the following sequance.

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

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

事件的预期顺序为

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

我假设这是命令，因为该项目必须在输入 B 之前离开 A .我在这里想念什么吗?是否有理由将 dragenter 在 dragleave 之前解雇?有没有办法改变这种行为?

I assumed that this would be the order since the item has to leave A before entering B. Am I missing something here? Is there a rationale for the dragenter being fired before the dragleave? Is there a way to change this behaviour?

我有一个JSFiddle 此处.

I have a JSFiddle here.

代码本身非常简单，只需监听 dragenter 和 dragover .

The code itself is pretty simple with the dragenter and dragover being listened to.

dragenter: function(e) {
    console.log("basket dragenter");
    // logic here
},
dragleave: function(e) {
    console.log("basket dragleave");
    // logic here
},

推荐答案

聚会晚了一点，但这是我的用例.想象一下，B完全包围在A中:

A little late to the party but, here is my use case. Imagine that B is entirely enclosed in A:

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

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

You can leave A here by leaving it entirely, or by leaving it to go to B. The fact that B.dragenter is fired before A.dragleave allows you to be aware of the direction of the drag in the A.dragleave handler.

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

In fact I just realise that the same goes for your use-case: you can leave A to the void (left-up-down) or to go to B (right).

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

Note that the above is my interpretation of 'why' this is useful. The behaviour itself confirmed by this section of the spec:

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

这篇关于HTML 5拖动事件:"dragenter"之后触发了"dragleave"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！