我在单页应用程序中使用 html5 dragevents。
目前,我正在监听 dragleave
和 dragenter
事件以在元素上设置适当的类。
但是,当两个有效的目标元素(A 和 B)彼此相邻时,我们将一个元素从 A 拖到 B 中,事件将按以下顺序触发。
+--------------+-------------+
| | |
+-------+ | A | B |
| | | | |
| Elem +------------------------------------> |
| | | | |
+-------+ | | |
+--------------+-------------+
dragenter
的 A
B 的 dragenter
dragleave
的 A
事件的预期顺序是,
dragenter
的 Adragleave
的 A
B 的 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
},
最佳答案
聚会有点晚了,但这是我的用例。想象一下 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
关于javascript - HTML 5 拖动事件 : 'dragleave' fired after 'dragenter' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43275189/