HTML5拖放無法正常工作

Question

我在這里舉了一個例子：

http://jsfiddle.net/NQQL6/

當我開始拖動鏈接時，購物車應變為綠色。 將項目拖到購物車上時，購物車應變為紅色。

這有效，但僅當購物車為空時：|

如果其中還有其他元素，則在將項目拖到這些元素上時似乎會觸發leave 。 如何防止這種情況發生？

我已經試過了事件偵聽器移動到document元素，並檢查event.target是一個孩子或孫子的cart ，但隨后leave似乎在隨機觸發body ，即使該項目是車區域內，所以我的課被刪除當它不應該:(

編輯：在這里找到了一些hacky解決方案： 將子元素拖到子元素上時會觸發父元素的“ dragleave”

所以你可以刪除這個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');
});

看這里

另請參閱此答案 。