javascript - HTML5 拖放无法正常工作

Question

我在这里做了一个例子：

http://jsfiddle.net/NQQL6/

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

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

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

我已经尝试将事件侦听器移动到document元素并检查是否event.target是子元素或孙子元素，cart但即使该项目在购物车区域内，它leave似乎也会随机触发，因此我的类在不应该被删除时被删除:(body

编辑：在这里找到了一些hacky解决方案： 拖动子元素时父元素的'dragleave'触发

所以你可以删除这个 Q :)

Answer 1

您需要将以下 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');
});

看这里

另请参阅this answer。