Stop draggable element being removed when it is Droppend using JQuery

Question

Im using JQuery Draggable and Droppable to drag an object from one div and drop it in another.

It drags and drops fine but when it does drop, it is then removed from the draggable list.

Is there a way to keep the object even after it has been dropped.

I have tried to append the clone back on to the draggable class but this didnt work.

Here is my code

       $(".draggableItems").draggable({
            scroll: false,
            helper: 'clone',    
        });

        $(".droppable-content").droppable({
            accept: ".draggableItems",
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            drop: function (event, ui) {
                $(".droppable-content").append($(ui.draggable));
            }
        });

Any help is appreciated.

Answer 1

You can combine the helper: "clone" of the draggable and the use the clone() function of jQuery to clone the element and add it to the droppable area:

$("#draggable li").draggable({
    helper: "clone"
}).disableSelection();

$("#droppable").droppable({
    drop: function (event, ui) {
        $(this).append(ui.draggable.clone());
    }
});

Working demo