如何将图像拖到第二个框，然后拖到垃圾桶 并从第二个 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>
最佳答案
只需要检测元素何时被放到垃圾桶上并删除原始节点。但是，由于这一切都是基于 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);
}
}
关于javascript - 如何将图像拖到 "trash can"并删除该单个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22571483/