title: HTML5 Drag & Drop - Image won't overwrite
body: <p>Anyone can help me solve the issue, Thanks for helping !!</p>
  
  <p>Updated using this <a href="http://jsfiddle.net/EkBgM/3/" rel="nofollow">jsfiddle</a>:</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;script&gt;
  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");
  var new_img = $('#'+data).clone();
  $('#'+ev.target.id).html(new_img);
  }
  
  &lt;/script&gt;
  
  &lt;body&gt;
  &lt;center&gt;
  &lt;p&gt;Drag the image you want into this box!&lt;/p&gt;
  
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;p&gt;&lt;b&gt;Main Image&lt;/b&gt;&lt;/p&gt;&lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;p&gt;&lt;b&gt;Image 2&lt;/b&gt;&lt;/p&gt;&lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;p&gt;&lt;b&gt;Image 3&lt;/b&gt;&lt;/p&gt;&lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/&gt;&lt;/a&gt;
  &lt;img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/&gt;&lt;/a&gt;
  &lt;img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/&gt;&lt;/a&gt;
  &lt;/body&gt;
  
  &lt;style type="text/css"&gt;
  #div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
  #div2 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
  #div3 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
  &lt;/style&gt;
  </code></pre>
  
  <p>Using the code above, the original image retain. but issue is if i drag another picture in a box that already got image, it won't overwrite.</p>