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

现在我有一列元素,我把它拖到我拖动的位置,它克隆,但是当我掉下来的时候,它也删除了原来的.

$( ".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’)将项目恢复到原始列表/位置. http://api.jqueryui.com/sortable/#method-cancel

$( ".column" ).sortable({
        helper: 'clone',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完整演示

原文地址：https://www.jb51.cc/jquery/151706.html