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

【问题标题】：Javascript Drag and Drop: removing dragged element following successful dropJavascript拖放：成功拖放后删除拖动的元素
【发布时间】：2012-01-06 08:29:37
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

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

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

【讨论】：

显然 dropEffect 在 Windows 上的 Chrome 中将永远没有，错误报告已开放多年：code.google.com/p/chromium/issues/detail?id=39399

【解决方案2】：

也看看这个例子：http://html5demos.com/drag

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

【讨论】：

此解决方案仅在所有元素都有 id 时才有效（我的没有）。此外，这意味着您必须将数据设置为 id，而不是有用的东西。

【解决方案3】：

一种方法是将其分配给范围在 dragstart 之外的变量，并在拖放时使用该元素。

See this fiddle.

【讨论】：

我试图避免将被拖动的元素存储在全局变量中，因为如果在不同的选项卡或浏览器之间发生拖动，这将导致问题。

【解决方案4】：

你在dragend事件中得到元素的放置位置。您可以查看该位置是否存在可放置元素。

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

【讨论】：