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

Question

我在javascript中使用原生拖放 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();
    }
});

Answer 2

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

  

var el = document.getElementById（e.dataTransfer.getData（'Text'））;

el.parentNode.removeChild(el);

Answer 3

一种方法是将其分配给在dragstart外部作用域的变量，并在删除时使用该元素。

See this fiddle.

Answer 4

您可以在 dragend 事件中获取元素的放置位置。您可以找到该位置是否存在可放置元素。

您可以使用document.elementFromPoint(x, y);