9

現在、要素の列があり、ドラッグすると複製されますが、ドロップすると元の要素も削除されます。

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

元の場所を（列に再追加せずに）保持し、クローンを目的の場所に移動するにはどうすればよいですか？

4

2 に答える 2

13

停止イベントハンドラー内で使用$(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');
        }
    });

アップデート：

アイテムがドロップされた場所の2番目のリストに要素を追加するには、次のようにします。

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');
        }

完全なデモについてはフィドルを参照してください

于 2013-01-07T16:35:22.837 に答える
1

新しいバージョンを使用している人は、次を使用してください。

revert: true

詳細はこちら：jQuerySortable-元のリストに保持

于 2021-02-09T19:07:58.393 に答える