How to clone an element with jQuery?

Question

I'm trying to implement a drag& drop feature using jQuery & it works great, now I want to replace the dragged element by another in the old place.

I'm using the clone() method but since I'm new to jQuery, the code I wrote clones the element infinitely, can somebody help me?

This is my code:

<script> 
$(function() {
    $(".draggable").draggable(
        {
            drag : function(event, ui) {
                $(this).clone().appendTo(this)
            }
        });

    $(".droppable").droppable({
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight")
        }
    });
});
</script>

You clone the element within the drag handler. The function assigned to drag: is called constantly while you drag the element. Assign the handler to either start: or stop: to clone it when you start or stop dragging but not repeatedly while dragging. — Flyer53, Jun 09 '17 at 12:32
yes i fugured that out , but how can i assign to these methods? — M. Dhaouadi, Jun 09 '17 at 12:39
Possible duplicate of [When I make a draggable clone and drop it in a droppable I cannot drag it again](https://stackoverflow.com/questions/867469/when-i-make-a-draggable-clone-and-drop-it-in-a-droppable-i-cannot-drag-it-again) — Sandman, Jun 09 '17 at 12:40

score 0 · Answer 1 · answered Jun 09 '17 at 13:16

This basically works. But you'll have to tweak it according your needs.

var dropclone;
$( ".draggable" ).draggable({
    start: function (event, ui) {
        dropclone = ui.helper.clone();
    }
});
$( ".droppable" ).droppable({
    drop: function() {
        $('body').append(dropclone);
    }
});

How to clone an element with jQuery?

1 Answers1