Javascript 拖放 : removing dragged element following successful drop

标签 javascript html drag-and-drop

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

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

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

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

最佳答案

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

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

关于Javascript 拖放 : removing dragged element following successful drop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8269445/

相关文章:

javascript - 在数组的 javascript 循环中使用对象名称

css - 在 IIS 中部署 MVC4 应用程序后背景图像不工作

javascript - 更新id拖放定位问题

javascript - 自定义动态创建的元素,添加通过弹出窗口选择的选项

javascript - 这些命名空间方法有什么区别?

javascript - 如何获取几个按钮的一个值? "Uncaught TypeError: Cannot read property"

actionscript-3 - 防止 Flex 树掉落反馈

c# - 如何在 silverlight 中拖放 "box"

javascript - 两行相同代码的区别

javascript - 使用 JavaScript 检测屏幕开/关