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

Posted 2021-03-27

在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时，dragleave在dragenter之后被解雇。这个线程很好地可视化问题：HTML 5 drag events: 'dragleave' fired after 'dragenter'

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

那么什么是一种方法来分配外部dropzone div类'noDrop'，当它有一个下降的内部div并且用户从外部dropzone div拖动第三个div到内部删除的div？

答案

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

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

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