clone node on drag

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>

Since I'm not able to comment (yet) I'll leave this as a separate answer - in case someone, like me, will find this question:

For the question from comment

"But I want the cloned/dropped element to be in the same position it was dropped. do you know how i can do it?"

I've found solution in different SO question, and the answer is to change this line:

   $(this).append($(ui.draggable).clone());

to

   $(this).append($(ui.helper).clone());

(change ui.draggable to ui.helper)

Hope it helps.

To re-drag the clone/copy, set the withDataAndEvents argument to true:

$(this).append($(ui.draggable).clone(*true*));