如何防止dragleave干扰嵌套dropzone元素上的dragenter事件？

Posted 2023-05-08

【中文标题】如何防止dragleave干扰嵌套dropzone元素上的dragenter事件？

【英文标题】：How to prevent dragleave interfering with dragenter event on nested dropzone element?

【发布时间】：2019-05-26 08:22:24

【问题描述】：

dropzone 中有两个嵌套元素并从外部元素拖动到内部元素，dragleave 操作优先于dragenter。

我最初有一个 div 为dropzone，它在 dragenter 更改类（'canDrop'）以指示是否可以放置，而在 dragleave 类恢复为中性（'plainDropZone'）。

删除时，draggable div 成为 dropzone div 的子级。现在，当另一个draggable 进入dropzone 时，类更改为“noDrop”以指示不再有任何丢弃。在dragleave 上，该类再次恢复为中性（'plainDropZone'）

问题：当从外部 dropzone div 拖动到内部放置的 div 时，外部 dropzone div 不应恢复为中性，但仍具有类 'noDrop'。

据我所知，这并没有按预期工作，因为当从外部 div 移动到内部 div 时，dragleave 在dragenter 之后被触发。这个线程很好地可视化了这个问题：html 5 drag events: 'dragleave' fired after 'dragenter'

这是一个完整的演示：https://jsfiddle.net/e12uadgh/

那么，当外部dropzone div 有一个放置的内部div 并且用户将第三个div 从外部dropzone div 拖动到内部放置的div 时，将如何分配外部dropzone div 类“noDrop”？

【参考方案1】：

找到了实现效果的方法。当将元素从外部 dropzone div 拖动到内部 dropzone div 时，外部 div 的 dragleave 在内部 div 的 dragenter 之后触发，因此 dragenter 上的任何更改都会被 dragleave 上的更改覆盖。

因此，如果下一个事件目标不是内部 div，则一种解决方案是仅对 dragleave 进行更改。由于这不能通过检查dragleave 上的event.target 来完成，因此我们可以使用切换来代替，它在内部 div 上的dragenter 上设置为 true，而在内部 div 上的dragleave 上设置为 false。

这是一个演示：https://jsfiddle.net/rookie_sen/2Lp5qg39/5/