HTML5拖放工作不正常

Question

我在这里做一个例子：

http://jsfiddle.net/NQQL6/

当我开始拖动链接时，应车变成绿色。当物品被拖到购物车上时，购物车应该变成红色。

这可行，但只有当购物车是空的时：

如果其中有任何其他元素，当我将该项目拖到这些元素上时，似乎会触发leave。我怎样才能防止这种情况发生？

我已经试过了事件侦听器移动到document元素，并检查是否event.target是一个孩子或孙子cart但随后leave似乎对body随机触发，即使该项目是在车区域内，所以我的班当它不应该:(

编辑获取删除：发现了一些解决方案，哈克在这里： 'dragleave' of parent element fires when dragging over children elements

这样你就可以删除这个问答:)

Answer 1

你的东东d以下的CSS应用到列表：

ul{ pointer-events: none; } 

看到这个更新小提琴：

http://jsfiddle.net/NQQL6/1/

编辑： 试试这个，http://jsfiddle.net/NQQL6/6/

略多的js逻辑，但应在工作，在忙。

Answer 2

有点太迟了，你可能解决了这一点，但你必须保持一个参考计数器计数dragleave /的dragenter事件：

var counter = 0; 

cart.addEventListener('dragenter', function(event){ 
    counter++; 
    cart.classList.add('ontop', 'activate'); 
    console.log('enter'); 
}); 

cart.addEventListener('dragleave', function(event){ 
    counter--; 
    if (counter === 0) { 
    cart.classList.remove('ontop'); 
    } 
    console.log('leave'); 
}); 

See here

另见本this answer。