JQuery-UI 可拖动项目变为不可拖动

Question

我有 2 个 div：leftDiv 和 mainDiv。 leftDiv 包含一些可拖放到 mainDiv 中的列表元素。我也想让这些放置的项目在 mainDiv 内可拖动，但是在 div 内第一次拖动后，项目变得不可拖动。我怎样才能解决这个问题？这是我的 jQuery 代码：

$('#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

你可以这样修复：

$('#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)