Javascript 如何将图像拖动到"；“垃圾桶”；并删除单个图像_Javascript_Html_Image_Drag And Drop

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

javascript html image

Javascript 如何将图像拖动到"；“垃圾桶”；并删除单个图像,javascript,html,image,drag-and-drop,Javascript,Html,Image,Drag And Drop,如何将图像拖到第二个框，然后拖到垃圾桶并从第二个div中删除该图像上面是指向我的JSFIDLE的链接 <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var dat

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

<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>


功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（data.cloneNode（true））；
}

只需检测元素何时掉落到垃圾箱上，并移除原始节点。但是，由于这都是基于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); 
    }
}

我们要求Fiddle用户在这里发布他们的实际代码，并提供Fiddle作为备份。换句话说，不要只链接到小提琴。将您的代码粘贴到此处。您能告诉我如何为每个新img生成一个唯一的id并将其删除。@user3354230当然，示例已更新。如果这是合适的，您介意标记为已接受吗？