如何拖动图像，同时仍然保留原始图像？

Question

如何复制图像并在同一位置保留原始图像的同时拖动图像？

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

#div1 { 
 
    width: 350px; 
 
    height: 200px; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
} 
 
img { 
 
    height: 100px; 
 
    width: 100px; 
 
}

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

Answer 1

我想你想的：

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

它几乎是你做了什么，但你要克隆的图像，并添加克隆不是原装的！

Answer 2

一定要包含jQuery，因为用vanilla JS编写它会很痛苦。

地址： $("body").append("<img class='drag2' src='http://www.hayspost.com/wp-content/uploads/2013/11/Wichita-State-Logo.png' draggable='true' ondragstart='drag(event)' />"); 到drag(ev) 和 $(".drag2").removeClass("drag2").attr("id","drag1"); 到drop(ev)。

希望这会有所帮助！

Updated Fiddle