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

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

我最初有一个div作为dropzone，它在dragenter上更改类“canDrop”以指示是否可以删除，而在dragleave上，该类恢复为中性的“plainDropZone”

拖放时，可拖动div成为dropzone div的子级。现在，当另一个可拖动div进入dropzone时，类将更改为“noDrop”，以指示不再可以拖放。在dragleave上，类再次恢复为中性“plainDropZone”

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

据我所知，这并没有达到预期效果，因为当从外分区移动到内分区时，dragleave会在dragenter之后被解雇。此线程很好地将问题可视化：

这是一个完整的演示：

---

那么，当外部dropzone div有一个删除的内部div，并且用户将第三个div从外部dropzone div拖到内部dropzone div时，如何将外部dropzone div指定为类“noDrop”

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

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

下面是一个演示：