Замените существующее изображение другим

Question

Я пытаюсь создать простой Javascript, чтобы перетащить изображение. Затянутое изображение после перетаскивания должно восстанавливаться в исходном положении. Я пытаюсь что-то вроде этого, но, похоже, это не работает; она не регенерирует картину:

Моя функция расслоение плотной:

var nPedY = 21; 
var nPedR = 21; 
var red = new Image(50,50); 
red.src = "red.png"; 

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)); 
    if (data == "drag1"){ 
     document.getElementById("drag1").src = red.src; 
     console.log(nPedR); 
    } 
} 

И мой HTML разметка:

<tr> 
<td width="50px" height="50px"><img id="drag1" src="red.png" align="center" draggable="true" ondragstart="drag(event)"></td> 
<td width="50px" height="50px"><img id="drag2" src="yellow.png" align="center" draggable="true" ondragstart="drag(event)"></td> 
</tr> 

Может кто-нибудь дать мне подсказку? Благодарю.

Answer 1

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

Как только вы клонируете элемент, к нему может быть добавлена ​​только копия.