Question

如何将图像拖动到第二个框然后再拖到垃圾桶并从第二个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>

Answer 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); 
    }
}

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

1 个答案: