如何拖動圖像，同時仍然保留原始圖像？

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