cloned "draggable" element's doesn't react to "droppable" areas

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 开发者_C百科live? So any new .draggable elements react with the droppable one?

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 );;
        }

});

try like this

$('.draggable').draggable({helper: "clone"});

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


   //re-make objects draggable
   $('.draggable').draggable({helper: "clone"});
});
...

Did this as an example for a different post.

http://jsfiddle.net/hHKh9/2/

I think you are missing helper:'clone' on the droppable