HTML5 拖放无法正常工作答案

【问题标题】：HTML5 drag and drop not working correctlyHTML5 拖放无法正常工作
【发布时间】：2013-05-28 20:07:45
【问题描述】：

我在这里做了一个例子：

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

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

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

我尝试将事件侦听器移动到 document 元素并检查 event.target 是 cart 的子代还是孙代，但随后 leave 似乎在 body 上随机触发，即使该项目在购物车区域内，所以我的班级在不应该的时候被删除:(

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

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

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

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

ul{ pointer-events: none; }

查看这个更新的小提琴：

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

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

更多的 js 逻辑，但它现在应该可以工作了。

【讨论】：

如果我这样做，购物车中的链接将无法点击
ul * { pointer-events: all; } 为ul 中的所有子元素重新启用指针事件

【解决方案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。

【讨论】：