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

Posted 2023-05-08

【中文标题】JQuery-UI 可拖动项变为不可拖动

【英文标题】：JQuery-UI draggable item become undraggable

【发布时间】：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 如果你把它写成答案，我会把它标记为正确的。

【参考方案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 请对我的回答进行投票，因为我知道并帮助了其他人，因为有些人只看到投票赞成的答案。