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

Posted 2023-05-08

【中文标题】Javascript拖放：成功拖放后删除拖动的元素

【英文标题】：Javascript Drag and Drop: removing dragged element following successful drop

【发布时间】：2012-01-06 08:29:37

【问题描述】：

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

我尝试过监听

drop

事件，但这只会在被拖放到的元素上触发，并且不会引用被拖动的元素。 我已尝试收听

dragend

元素，但这并不能让我知道投放是否成功。 我试图避免将被拖动的元素存储在全局变量中，因为如果在不同的选项卡或浏览器之间发生拖动，这会导致问题。

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

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

【参考方案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);