title: How to drag and drop using jquery between different Div
body: <p>I want to make Drag &amp; drop web builder. I am using the script to drag and drop the images from one place to another. but they are placing after then other. I need the script to freely place where ever I want. 
  The script I am using is ""</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
  $("#dvSource img").draggable({
  revert: "invalid",
  refreshPositions: true,
  drag: function (event, ui) {
  ui.helper.addClass("draggable");
  },
  stop: function (event, ui) {
  ui.helper.removeClass("draggable");
  var image = this.src.split("/")[this.src.split("/").length - 1];
  if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
  
  }
  else {
  
  }
  }
  });
  $("#dvDest").droppable({
  drop: function (event, ui) {
  if ($("#dvDest img").length == 0) {
  $("#dvDest").html("");
  }
  ui.draggable.addClass("dropped");
  $("#dvDest").append(ui.draggable);
  }
  });
  });
  &lt;/script&gt;
  
  
  
  and 
  
  
  &lt;pre lang="xml"&gt;&lt;div id="dvSource"&gt;
  &lt;img alt="" src="images/Chrysanthemum.jpg" /&gt;
  &lt;img alt="" src="images/Desert.jpg" /&gt;
  &lt;img alt="" src="images/Hydrangeas.jpg" /&gt;
  &lt;img alt="" src="images/Jellyfish.jpg" /&gt;
  &lt;img alt="" src="images/Koala.jpg" /&gt;
  &lt;img alt="" src="images/Lighthouse.jpg" /&gt;
  &lt;img alt="" src="images/Penguins.jpg" /&gt;
  &lt;img alt="" src="images/Tulips.jpg" /&gt;
  &lt;/div&gt;
  &lt;hr /&gt;
  &lt;div id="dvDest"&gt;
  Drop here
  &lt;/div&gt;&lt;/pre&gt;
  </code></pre>