JQuery-UI 可拖动项变为不可拖动答案

【问题标题】：JQuery-UI draggable item become undraggableJQuery-UI 可拖动项变为不可拖动
【发布时间】：2018-04-14 14:44:28
【问题描述】：

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

【问题讨论】：

请创建一个sn-p供我们测试，从我们掌握的信息中很难猜出原因
如果你想能够从mainDiv拖动文件，我认为你需要有$("#mainDiv li').draggable({...})
你能告诉我 foo div 包含什么并分享你完整的代码或分享 html
VTodorov，你的答案是正确的。太简单了 :D 如果你把它写成答案，我会把它标记为正确的。

标签： javascript jquery jquery-ui draggable droppable

【解决方案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)

【讨论】：

@VaxoBasilidze 请对我的回答进行投票，因为我知道并帮助了其他人，因为有些人只看到投票赞成的答案。