悬停一个子元素时，HTML5拖动器被触发 [英] HTML5 dragleave fired when hovering a child element

问题描述

我遇到的问题是，当悬停该元素的子元素时，会触发元素的 dragleave 事件。另外，当再次悬停父元素时， dragenter 不会被触发。

我做了一个简化的小提琴： http://jsfiddle.net/pimvdb/HU6Mk/1/ 。

HTML：

 < div id =dragdraggable =true> drag ME< / DIV> 
 
< hr> 
 
< div id =drop> 
 drop here 
< p> child< / p> 
父
< / div> 
  

与以下JavaScript：

 $（'＃drop'）。bind（{
 dragenter：function（）{
 $（this）.addClass（'red'）; 
} ，
 
 dragleave：function（）{
 $（this）.removeClass（'red'）; 
} 
}）; 
 
 $（'＃drag'）。bind（{
 dragstart：function（e）{
 e.allowedEffect =copy; 
 e.setData text / plain，test）; 
} 
}）; 
  

应该做的是通过放下 div来通知用户当您拖动某些东西时，请将红色/ 这是有效的，但是如果你拖动到 p 小孩，则 dragleave 被触发， div 不再是红色的。回到 div 的下拉也不会再次变红。有必要完全脱离 div ，然后再次拖回，使其变红。

是拖曳到子元素中可以防止拖曳drag drag drag from from？？？？？？？？？？？？？？？？？？？？？？>>>>>>>>>>>>>>>>>> p>你只需要保留一个引用计数器，当你得到一个拖动器时增加一个引用计数器，当你得到一个拖拽时，它会递减。当计数器为0时 - 删除该类。

  var counter = 0; 
 
 $（'＃drop'）。bind（{
 dragenter：function（ev）{
 ev.preventDefault（）; //需要IE 
 counter ++ ; 
 $（this）.addClass（'red'）; 
}，
 
 dragleave：function（）{
 counter--; 
 if （counter === 0）{
 $（this）.removeClass（'red'）; 
} 
} 
}）; 
  

注意：在drop事件中，重置计数器为零，并清除添加的类。

您可以运行它 here

The problem I'm having is that the dragleave event of an element is fired when hovering a child element of that element. Also, dragenter is not fired when hovering back the parent element again.

I made a simplified fiddle: http://jsfiddle.net/pimvdb/HU6Mk/1/.

HTML:

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

with the following JavaScript:

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 dragleave: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });

What it is supposed to do is notifying the user by making the drop div red when dragging something there. This works, but if you drag into the p child, the dragleave is fired and the div isn't red anymore. Moving back to the drop div also doesn't make it red again. It's necessary to move completely out of the drop div and drag back into it again to make it red.

Is it possible to prevent dragleave from firing when dragging into a child element?

解决方案

You just need to keep a reference counter, increment it when you get a dragenter, decrement when you get a dragleave. When the counter is at 0 - remove the class.

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter++;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

Note: In the drop event, reset counter to zero, and clear the added class.

You can run it here

这篇关于悬停一个子元素时，HTML5拖动器被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！