web-dev-qa-db-ja.com

jquery sortableを使用しているときにアイテムを複製するにはどうすればよいですか？

私はこのメソッドを使用しています http://jqueryui.com/demos/sortable/#connect-lists 私が持っている2つのリストを接続します。リストAからリストBにドラッグできるようにしたいのですが、アイテムがドロップされた場合、元のリストをリストAに保持する必要があります。オプションとイベントを確認しましたが、そのようなものはないと思います。アプローチはありますか？

jquerylistdrag-and-dropduplicatesjquery-ui-sortable
56
odle

はじめに、 これを見てください 、および@Erezの回答も読んでください。

$(function () {
    $("#sortable1").sortable({
        connectWith: ".connectedSortable",
        remove: function (event, ui) {
            ui.item.clone().appendTo('#sortable2');
            $(this).sortable('cancel');
        }
    }).disableSelection();

    $("#sortable2").sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});
25
Thorsten
$("#sortable1").sortable({
    connectWith: ".connectedSortable",
    forcePlaceholderSize: false,
    helper: function (e, li) {
        copyHelper = li.clone().insertAfter(li);
        return li.clone();
    },
    stop: function () {
        copyHelper && copyHelper.remove();
    }
});
$(".connectedSortable").sortable({
    receive: function (e, ui) {
        copyHelper = null;
    }
});
85
Erez

Erezのソリューションは私には有効ですが、カプセル化の欠如がイライラすることがわかりました。グローバル変数の使用を避けるために、次のソリューションを使用することを提案します。

$("#sortable1").sortable({
    connectWith: ".connectedSortable",

    helper: function (e, li) {
        this.copyHelper = li.clone().insertAfter(li);

        $(this).data('copied', false);

        return li.clone();
    },
    stop: function () {

        var copied = $(this).data('copied');

        if (!copied) {
            this.copyHelper.remove();
        }

        this.copyHelper = null;
    }
});

$("#sortable2").sortable({
    receive: function (e, ui) {
        ui.sender.data('copied', true);
    }
});

これがjsFiddleです： http://jsfiddle.net/v265q/190/

28
Sean Anderson

私はこれが古いことは知っていますが、Erezの仕事に対する答えを得ることができず、Thorstenは私が必要とするプロジェクトのためにそれをカットしませんでした。これはまさに私が必要とする方法で動作するようです：

$("#sortable2, #sortable1").sortable({
    connectWith: ".connectedSortable",
    remove: function (e, li) {
        copyHelper = li.item.clone().insertAfter(li.item);
        $(this).sortable('cancel');
        return li.clone();
    }
}).disableSelection();
7
abuser2582707

Abuser2582707の答えは私に最適です。 1つのエラーを除きます：リターンを変更する必要があります

return li.item.clone();

したがって、次のようになります。

$("#sortable2, #sortable1").sortable({
    connectWith: ".connectedSortable",
    remove: function (e, li) {
        li.item.clone().insertAfter(li.item);
        $(this).sortable('cancel');
        return li.item.clone();
    }
}).disableSelection();
5
creativecat

Erezのソリューションを使用するが、2つのソート可能なポートレットを接続する場合（基本は http://jqueryui.com/sortable/#portlets からのポートレットサンプルコードでした）、クローンの切り替えは機能しませんでした。 「return li.clone（）;」の前に次の行を追加しましたそれを機能させるために。

copyHelper.click(function () {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
});

これを理解するのに時間がかかったので、誰かの助けになることを願っています。

0
user1505746