JQuery-UI draggable item become undraggable

Question

I have 2 divs: leftDiv and mainDiv. leftDiv contains some list elements which are draggable and droppable into mainDiv. I want to make these dropped items draggable inside the mainDiv as well, but after the first drag inside this div, items become non draggable. How can I fix this? Here is my jQuery code:

$('#output li').draggable({
    helper: 'clone',
    revert: 'invalid'
});
$('#mainDiv').droppable({
    drop: function (event, ui) {
        if(ui.draggable.hasClass('foo')){
            $(ui.helper).remove();
            $(this).append(ui.draggable.draggable());
        }
        else {
            var item = $('<div class="foo">').append(ui.draggable.text());
            item.draggable();
            $(this).append(item);
        }
    }
});

Answer 1

You can fix it like this:

$('#mainDiv').droppable({
    drop: function (event, ui) {
        if(ui.draggable.hasClass('foo')){
            //$(ui.helper).remove();
            var draggedItem = ui.draggable.draggable();            
            $(this).append(draggedItem);
            draggedItem.draggable();
        }
        else {
            var item = $('<div class="foo">').append(ui.draggable.text());
            item.draggable();
            $(this).append(item);
        }
    }
});

Online Demo (fiddle)