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

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

Моя функция js:

var nPedY = 21; var nPedR = 21; var red = new Image(50,50); red.src = "http://sofru.miximages.com/javascript/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:

     

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

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

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