jQuery UI 可排序：移动克隆但保持原始

Posted 2023-05-08

【中文标题】jQuery UI 可排序：移动克隆但保持原始

【英文标题】：jQuery UI sortable: Move clone but keep original

【发布时间】：2012-12-21 09:39:41

【问题描述】：

现在我有一列元素，我将它拖到我拖动的位置，它会克隆，但当我放下时，它也会删除原始元素。

$( ".column" ).sortable(
        helper: 'clone',
        connectWith: ".column",
        connectWith: ".grid",
        start: function(e, ui)
            ui.placeholder.height(ui.item.height());
             $(".column" ).find('.portlet:hidden').show()
             console.log('started')
        ,
        stop: function(event, ui) 
            $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
        
    );

我怎样才能将原件保留在其所在的位置（无需将其重新附加到列中）并让克隆移动到所需的位置？

【问题讨论】：

使用clone()时要注意生成无效的html（重复ID）。

This question 非常相似，并且有一个很好的答案——看看投票最多的，而不是被接受的。

【参考方案1】：

在停止事件处理程序中使用$(this).sortable('cancel') 将项目恢复到其原始列表/位置。 http://api.jqueryui.com/sortable/#method-cancel

$( ".column" ).sortable(
        helper: 'clone',
        connectWith: ".column",
        connectWith: ".grid",
        start: function(e, ui)
            ui.placeholder.height(ui.item.height());
             $(".column" ).find('.portlet:hidden').show()
             console.log('started')
        ,
        stop: function(event, ui) 
            $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
            $(this).sortable('cancel');
        
    );

更新：

要将元素附加到项目所在位置的第二个列表中，请执行以下操作类似：

stop: function(event, ui) 
            var toListID = ui.item.parent().attr('id');   
            var idx = $('#' + toListID).children().index($(ui.item[0]));
            if(idx== -1)return;
            var elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone');
            $('#' + toListID).children(':eq('+idx+')').after(elm);
            $(this).sortable('cancel');
        

查看fiddle查看完整演示

【讨论】：

这似乎取消了克隆元素。当我放下时，没有任何东西进入放置位置。

我明白你现在在想什么，我之前尝试过这个解决方案来追加，但它需要在实际放置的位置。不只是添加到底部。关于如何避免附加的任何想法？

对于 jQuery $('.list2').children().eq(idx).after(elm);。我认为这也稍微更有效（根据文档）。

非常感谢更新，其中包含用于复制到指定位置的明确示例！最有帮助！

@adamb 你的小提琴有问题。那就是当您在 list1 中上下移动项目时，无论您是否将它们拖到那里，它们都会在 list2 中重复。你如何防止这种情况发生？

【参考方案2】：

如果有人使用新版本，请使用：

revert: true

更多详情：jQuery Sortable - Keep it in original list

【讨论】：

非常感谢您让我开心。我得到了我需要的东西