javascript - 如何防止 Dragleave 干扰嵌套 dropzone 元素上的 Dragenter 事件？

Question

在 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？

Answer 1

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

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

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