Javascript 拖放 : removing dragged element following successful drop

Question

我在 javascript 中使用 native 拖放 API。成功放置后如何从 DOM 中删除拖动的元素？

• 我试过监听 drop 事件，但这只会在被拖放到的元素上触发，而不会引用被拖动的元素。
• 我试过听 dragend 元素，但这并不能让我知道是否成功放置。
• 我试图避免将被拖动的元素存储在全局变量中，因为如果在不同的选项卡或浏览器之间发生拖动，这会导致问题。

这是一个例子:http://jsfiddle.net/KNG6n/3/

可以拖入框中的字母列表。当一个字母的节点放在盒子上时，我希望它从列表中删除(不影响包含相同字母的任何其他列表项)

Answer 1

在对拖动的元素执行任何操作之前，监听 dragend 事件并检查 dataTransfer 对象的 dropEffect 变量:

htmlElement.addEventListener('dragend', function(event){
    if(event.dataTransfer.dropEffect !== 'none'){
        $(this).remove();
    }
});