HTML5拖放：在执行drop事件时如何删除所有父级中dragenter中添加的类（因此，不执行dragleave来删除它）

Question

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

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

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

问题是，当我将元素放到子元素中时，有两个选择：

选项1：event.stopPropagation()事件中的drop 包含问题在于，在这种情况下，父级将不会执行drop事件，并且父级中的“ red”类也不会被删除。

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

我想到了通过遍历stopPropagation()数组来删除添加的类的方法，使用event.path的解决方案，但可能还有另一种方法来解决该问题。

这里是选项1的fiddler，带有stopPropagation()在这里，选项2的fiddler 无stopPropagation()

Answer 1

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