Question

现在我有一列元素，我把它拖到我拖动的地方，克隆但是当我放下时，它也会移除原始元素。

$( ".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');
        }
    });

如何保持原始位置（不将其重新附加到列）并让克隆移动到所需位置？

Answer 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了解完整演示

Answer 2

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

revert: true

此处有更多详细信息：jQuery Sortable - Keep it in original list

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

2 个答案: