clone node on drag

Question

i want to be able to create a copy of the element that i want to drag. im using the standard ui draggable and droppable. i know about the helper clone option. but that does not create a copy. the dragged item gets reverted back to the original position.

Answer 1

Mark,

Try this example:

     $(document).ready(function(){
  $(".objectDrag").draggable({helper:'clone'});  

  $("#garbageCollector").droppable({
   accept: ".objectDrag",
   drop: function(event,ui){
     console.log("Item was Dropped");
     $(this).append($(ui.draggable).clone());
    }
  });

 });

And the Html looks like this

     <div class="objectDrag" 
  style="width:10%; color:white;border:black 1px solid; background-color:#00A">Drag me</div>

 <div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div>

Answer 2

This was very helpful, but I can't redrag the original after. Any ideas?

Answer 3

Thanks for your solution. But can I know hw it improve to the clone for multiple times? Sadee

Answer 4

I don't know if this will help but with this guys example you can drag and drop the text may times. http://skfox.com/2008/11/26/jquery-example-inserting-text-with-drag-n-drop/

Answer 5

To redrag the clone/copy use $(this).append($(ui.draggable).clone(true));