clone node on drag

javascript jquery clone draggable
mark picture mark · Mar 8, 2009 · Viewed 25k times · Source

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

Scott picture Scott · Mar 8, 2009

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>

Related questions

When cloning a draggable object in jQuery UI, how can you transfer the data and events to the new element?

I have a draggable element with the helper: 'clone' set, but when it clones the element, none of the data() or events are persistent in the new element. I've tried a number of ways to reattach the data(), but I …

Read More
How to jQuery clone() and change id?

I need to clone the id and then add a number after it like so id1, id2, etc. Everytime you hit clone you put the clone after the latest number of the id. $("button").click(function() { $("#id").clone().after("#id"); });

Read More
Is it possible to clone html element objects in JavaScript / JQuery?

I am looking for some tips on how to solve my problem. I have a html element (like select box input field) in a table. Now I want to copy the object and generate a new one out of the …

Read More