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

时间:2015-11-04 07:40:48

标签: html5 javascript-events drag-and-drop draggable drag

我已将div包含在另一个父div中,并且允许" drop"。
在示例中,一个名为" red"被添加到dragenter事件中的所有可放置对象。因此,如果我在子元素中输入鼠标,则子项和父项都将获得" red"类。

当我中止拖放或者在操作期间我留下元素时,dragleave事件将删除添加的"红色"类。

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

  • 选项1:drop事件中包含event.stopPropagation() 问题是,在这种情况下,父母不会执行drop事件和" red"在父母中根本不会删除class。
  • 选项2:drop事件中的event.stopPropagation()未包含 问题是在这种情况下,将为子元素和父元素执行drop事件。但是只应对子元素执行放置操作。

    我想通过运行event.path数组来移除添加的类来使用stopPropagation()的解决方案,但是可能还有其他方法可以解决这个问题。

    此处fiddler为选项1 ,其中包含stopPropagation()
    这里是fiddler选项2 没有stopPropagation()

  • 1 个答案:

    答案 0 :(得分:0)

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