在 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 并且用户从外部 dropzone
div 拖动第三个 div 时,如何为外部 dropzone
div 分配类“noDrop”呢? code> div 到内部删除的 div?
最佳答案
找到了实现效果的方法。将元素从外部 dropzone div 拖动到内部 dropzone div 时,外部 div 的 dragleave
在内部 div 的 dragenter
之后触发,以便 dragenter
上的任何更改code> 被 dragleave
上所做的更改覆盖。
因此,如果下一个事件目标不是内部 div,则一种解决方案是仅对 dragleave
进行更改。由于这无法通过检查 dragleave
上的 event.target
来完成,因此我们可以使用切换开关,在 dragenter
上将其设置为 true内部 div,并且在内部 div 上的 dragleave
上变为 false。
关于javascript - 如何防止 Dragleave 干扰嵌套 dropzone 元素上的 Dragenter 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53959713/