Javascript HTML5拖放无法正常工作

我在这里举了一个例子：

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

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

如果其中有任何其他元素，则当我将项目拖动到这些元素上时，

leave

似乎会被触发。我怎样才能防止这种情况发生

我已尝试将事件侦听器移动到

文档

元素，并检查

事件。target

是否是

购物车

的子女或孙子，但是

离开

似乎是在

主体

上随机触发的，即使项目在购物车区域内，因此我的类在不应该：(

编辑：在此处找到一些黑客解决方案：

---

因此，您可以删除此Q:）

您需要对列表应用以下css：

ul{ pointer-events: none; }

请参阅此更新的小提琴：

编辑： 试试这个

---

稍微多一点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');
});

---

另请参见此。

如果我这样做

ul*{pointer events:all；}

以重新启用

ul