如何将图像拖到“垃圾桶”并删除该单个图像答案

【问题标题】：How to drag image to "trash can" and remove that single image如何将图像拖到“垃圾桶”并删除该单个图像
【发布时间】：2014-03-21 23:45:26
【问题描述】：

http://jsfiddle.net/838gD/

如何将图像拖到第二个框，然后拖到垃圾桶并从第二个 div 中删除该图像上面是我的 jsfiddle 的链接

<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
   var data=ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
</script>
</head>

<body>
<div id="startBox">
<img id="drag1" src="http://www.hayspost.com/wp-content/uploads/2013/11/Wichita-State-Logo.png" draggable="true" ondragstart="drag(event)">
</div>
<br>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img src="http://images.iskysoft.com/data-recovery-mac/mac-trash.jpg" ondrop="drop(event)" ondragover="allowDrop(event)" id="trash" draggable="false"/>
</body>

【问题讨论】：

我们要求 Fiddle 用户在问题中发布他们的实际代码，并提供 Fiddle 作为备份。换句话说，不要只链接到 Fiddle。在此处粘贴您的代码。

标签： javascript html image drag-and-drop

【解决方案1】：

只需要检测一个元素何时被丢弃到垃圾桶并移除原始节点。但是，由于这都是基于 ID 的，它会先从 startBox 中删除原始图像，然后在第二次尝试时删除您想要的图像。

我建议以不同的方式为每个克隆或目标节点生成唯一 ID。

编辑：更新示例，使用时间戳生成新 ID。

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");

    var clone = document.getElementById(data).cloneNode(true);
    clone.id = clone.id + (new Date()).getMilliseconds();
    ev.target.appendChild(clone);

    if (ev.target == document.getElementById("trash")) {
        var img = document.getElementById(data);
        img.parentNode.removeChild(img); 
    }
}

【讨论】：

你能告诉我如何为每个新的 img 生成一个唯一的 id 并将其删除。
@user3354230 当然，示例已更新。如果这合适，您介意将其标记为已接受吗？