HTML5 Drag&删除：如何在执行drop事件时删除所有父级中dragenter中添加的类（因此不执行dragleave以删除它） [英] HTML5 Drag & Drop : How to remove class added in dragenter in all parent when drop event executed (so dragleave is not executed for removing it)

问题描述

我有 div 包含在另一个允许drop的父 div 中。

在示例中，名为red的类被添加到 dragenter 事件中的所有droppable对象中。因此，如果我在子元素中输入鼠标，则子元素和父元素都将获得红色类。

I Have div included in another parent div that are both allowed for "drop".
In the example a class named "red" is added to all droppable object in dragenter event. So if I enter the mouse durring drag in child element both child and parent will get "red" class.

当我中止拖动时&如果我在操作期间留下元素， dragleave 事件将删除添加的红色类。

When I abort the drag&drop or if I leave elements during operation, the dragleave event will remove the added "red" class.

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

The problem is when I drop the element into child there are two options :

选项1：event.stopPropagation（）包含 in drop event

问题是在这种情况下，父进程不会执行 drop event并且父级中根本不会删除red类。

选项2：在 drop 事件<事件中，event.stopPropagation（）未包含 br>
问题是在这种情况下，将对子元素和父元素执行 drop 事件。但是只应该为子元素执行drop动作。

Option 1 : event.stopPropagation() is included in drop event
The problem is that in this case, the parent won't execute the drop event and the "red" class will not be removed at all in parent.

Option 2: event.stopPropagation() is not included in drop event
The problem is that in this case the drop event will be executed for both child and parent element. But the drop action should be done only for child element.

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

I thought about a solution using stopPropagation() by runing through event.path array for removing the added class but there are probably another ways to solve the problem.

这里的 fiddler for option 1 with stopPropagation（）

这里没有stopPropagation（）

Here the fiddler for option 1 with stopPropagation()
Here the fiddler for option 2 without stopPropagation()

推荐答案

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

Register a dragend event on the element that you are dragging. The dragend event is fired when you release the element that is being dragged. The event will be fired regardless of whether it was dropped in a dropzone or not. This way you can separate the drop event from the end of drag. You can filter your process using conditions.

这篇关于HTML5 Drag&amp;删除：如何在执行drop事件时删除所有父级中dragenter中添加的类（因此不执行dragleave以删除它）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！