<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="https://www.netbax.net/netbax_files/opera.png" draggable="true" ondragstart="drag(event)" 
id="drag1" height="30" width="31" alt="opera" title="opera"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both">Drag the opera logo into the rectangle.</p>

#div1, #div2
{float:left;width:100px; height:45px; margin:0px;padding:20px;border:1px solid #960018;}

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

<iframe src="https://www.netbax.net/tab/html/html-drag-and-drop.html" style="width: 550px; height:550px;" frameborder="0"></iframe>