title: keep image same from dragged DIV after Drop it to another DIV
body: <p>I have 2 Div tags. one for Drag and another for Drop. When i drop images from one div to another div image removed from drag div. I need to keep image same in drag Div after drop it to second div. </p>
  
  <p>Here is my code:</p>
  
  <p>HTML CODE</p>
  
  <pre><code>   &lt;div id="drag" style="float: left; margin: 10px;"&gt;
      &lt;span style='font-family: Trebuchet MS; font-size: 14px; color: Red; font-weight: bolder;'&gt;
          Drag Images&lt;/span&gt;
      &lt;img src="images/map1.jpg" alt="circle1" width="45" height="45" class="drg " /&gt;
      &lt;img src="images/map2.jpg" alt="circle2" width="45" height="45" class="drg " /&gt;
      &lt;img src="images/map3.jpg" alt="triangle3" width="65" height="55" class="drg " /&gt;
  &lt;/div&gt;
    &lt;div id="drop" style="float: left;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS CODE</p>
  
  <pre><code>          &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          // sets the draggable and define its options
          $('#drag .drg').draggable({
              drag: function () {
                  $(this).css({ opacity: 0.5, containment: "#drop" });
                  $('#drag .drg')
                  // revert: 'invalid', helper: 'clone', snap: "#drop_here td", opacity: 0.7
              }
          });
  
          // define options for droppable
          $('#drop').droppable({
              //accept: 'img.drg',      // accept only images with class 'drg'
              activeClass: 'drp',           // add class "drp" while an accepted item is dragged
              drop: function (event, ui) {
                  ui.draggable.show();
                  var drq = ui.draggable[0].className;
                  //test2
                  if (drq == "drg  ui-draggable ui-draggable-dragging") {
  
                      // alert(drq);
                      var img = ui.draggable[0];
  
                      //remove text
                      $(this).html("");
                      //set size of the image to fit the box and put it into the topleft corner
                      $(img).css({ opacity: 1, width: "400px", height: "400px", top: "0px", left: "0px" });
                      $(this).append(img);
                  }
  
                  //test2
  
              }
          });
  
          // when the "#sw" element (inside the "#drop") is clicked
          // show the items with class "drg", contained in "#drag"
          $('#drop #sw').click(function () {
  
              $('#drag .drg').slideDown(1000);
          });
      });
  </code></pre>
  
  <p></p>