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.

Solution 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>

Solution 2

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.

Solution 3

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

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

Comments

[mark]

Scott, thanks a lot for this. 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 tried to add .css(ui.position). but it did not work

[Scott]

Mark, my first guess would've been to use the .css(ui.position), but if you've tried that... What you could try is to create an temp copy of the draggable object on stop. This should contain the relative position of the object. Append that to the container instead of the object itself. Let me know