HTML5拖放不能正常工作

HTML5 drag and drop not working correctly

本文关键字：工作 常工作 拖放 不能 HTML5      更新时间：2023-09-26

我在这里做了一个例子:

http://jsfiddle.net/NQQL6/

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

此操作有效，但仅当购物车为空时:|

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

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

编辑:在这里找到了一些hack的解决方案:& # 39; dragleave& # 39;当拖过子元素时，父元素触发

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

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

ul{ pointer-events: none; }

查看更新后的提琴:

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

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

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

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

看到

相关文章：