HTML5 Drag & Drop : 如何在 drop 事件执行时删除所有父级的 dragenter 中添加的类（因此不执行 dragleave 来删除它）

Question

我将 div 包含在另一个父级 div 中，这两个父级都允许“丢弃”。

在示例中，一个名为“red”的类被添加到dragenter 事件中的所有可放置对象。因此，如果我在拖动子元素时输入鼠标子元素和父元素都会获得“红色”类。

当我中止拖放或在操作期间离开元素时，dragleave 事件将删除添加的“红色”类。

问题是当我将元素放入子元素时，有两个选项：

选项 1：event.stopPropagation() 包含在 drop 事件中
问题是在这种情况下，父级不会执行drop 事件，并且根本不会在父级中删除“红色”类。

选项 2：event.stopPropagation() 不包括在drop 事件中
问题是在这种情况下，drop 事件将为子元素和父元素执行。但是应该只对子元素执行 drop 操作。

我考虑过使用stopPropagation() 的解决方案，通过运行event.path 数组来删除添加的类，但可能还有其他方法可以解决问题。

这里是选项 1 的 fiddlerstopPropagation()
这里fiddler 用于选项 2 没有stopPropagation()

Answer 1

在要拖动的元素上注册一个 dragend 事件。当您释放正在拖动的元素时，会触发 dragend 事件。无论是否将其放置在放置区中，都会触发该事件。这样，您可以将放置事件与拖动结束分开。您可以使用条件过滤您的流程。