HTML5拖放无法正常工作

Question

我在这里举了一个例子：

http://jsfiddle.net/NQQL6/

当我开始拖动链接时，购物车应该会变成绿色。当商品在购物车上拖动时，购物车应变为红色。

这有效，但前提是购物车是空的：|

如果其中有任何其他元素，leave似乎是在我将项目拖动到这些元素上时触发的。我如何防止这种情况发生？

我尝试将事件侦听器移动到文档元素并检查event.target是购物车的子级还是孙子级，但即使项目在购物车区域内，离开似乎也会在身体上随机触发，因此我的类在不应该:(

编辑：在这里找到了一些黑客解决方案：拖动子元素时父元素的“拖动”

因此您可以删除此Q:）

Answer 1

对游戏来说有点晚，您可能解决了这个问题，但是您需要保留一个引用计数器来计算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');
});

看这里

另请参阅此答案。

Answer 2

您需要将以下css应用于列表：

ul{ pointer-events: none; }

请参阅此更新的小提琴：

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

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

稍微多一点的js逻辑，但它现在应该工作了。