Question

我在这里做了一个例子：

http://jsfiddle.net/NQQL6/

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

这样可行，但仅当购物车为空时：|

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

我已尝试将事件监听器移至document元素，并检查event.target是否为cart的子项或孙子项，但leave似乎是随机触发的在body即使项目在购物车区域内，所以我的课程在不应该被删除时被删除：（

编辑：在这里找到了一些hacky解决方案： 'dragleave' of parent element fires when dragging over children elements

所以你可以删除这个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');
});

See here

另见this answer。

HTML5拖放无法正常工作

2 个答案: