HTML5 拖放无法正常工作

Posted 2023-05-08

【中文标题】HTML5 拖放无法正常工作

【英文标题】：HTML5 drag and drop not working correctly

【发布时间】：2013-05-28 20:07:45

【问题描述】：

我在这里做了一个例子：

http://jsfiddle.net/NQQL6/

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

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

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

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

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

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

【参考方案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。