How can I replace the content of a div when I drag and drop

Question

How can I drag and replace the content when I drop; in this example: http://jsbin.com/uvihox/5/edit ?

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

Answer 1

try this:

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

update your drop function like this. basically, you need to update the src of dropped img. It works for now.

updated fiddle