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

问题描述 投票:0回答:1

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

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

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

javascript html5 drag-and-drop
1个回答
1
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.