title: Jquery drag and drop elements stay in list and create another
body: <p>I have lists of elements which may be drag and drop in <code>&lt;div class="droppable"&gt;</code> . But after drop the draged element must stay in list. For example if I drag and drop <code>&lt;p class="draggable" name="name"&gt;Name&lt;/p</code>> it will be stay in first div and will create in  <code>&lt;div class="droppable"&gt;</code></p>
  
  <pre><code>&lt;div&gt;
      &lt;p class="draggable" name="name"&gt;Name&lt;/p&gt;
      &lt;p class="draggable" name="LastName"&gt;LastName&lt;/p&gt;
      &lt;p class="draggable" name="Country"&gt;Country&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;div class="droppable"&gt;
  &lt;/div&gt;
  
  
  $(function() {
     $( ".draggable" ).draggable();
     });
  
  
     $('.droppable').droppable({
          accept: '.draggable',
           drop: function(){
              alert("HEY!");
          }
     });
  </code></pre>