Question

Hay I’m using this code to clone a draggable element

$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
    $(this).after($(ui.helper).clone().draggable());
});


$(".droppable").droppable({accept: ".draggable"});

Which works great. However, the “cloned” object no long reacts to “droppable” areas.

Is there any way around this? Can i make the draggable live? So any new .draggable elements react with the droppable one?

Answer 1

You have to declare an drop-event function to interact on droppable.

see Here

Every clone interacts with the droppable.

$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
    $(this).after($(ui.helper).clone().draggable());
});


$(".droppable").droppable({accept: ".draggable",


        drop: function( event, ui ) {
            $( this )
                .addClass( "dropped" ).find( "> p" )
                    .html( document.lastModified );;
        }

});