Javascript拖放:成功删除后删除拖动的元素

Question

我在javascript中使用本机拖放 API.如何在成功删除后从DOM中删除拖动的元素？

• 我已经尝试过监听drop事件,但这只会被触发的元素触发,并且没有引用被拖动的元素.
• 我试过听过dragend元素,但这并没有让我知道drop是否成功.
• 我正在尝试避免将要拖动的元素存储在全局变量中,因为如果在不同的选项卡或浏览器之间发生拖动,这将导致问题.

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

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

Answer 1

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

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

Answer 2

另请参阅此示例:http://html5demos.com/drag

var el = document.getElementById(e.dataTransfer.getData('Text'));

el.parentNode.removeChild(el);