jquery sortable을 사용할 때 항목을 어떻게 복제합니까?

jquery sortable을 사용할 때 항목을 어떻게 복제합니까?

---

이 방법 http://jqueryui.com/demos/sortable/#connect-lists 를 사용하여 내가 가진 두 목록을 연결합니다. 목록 A에서 목록 B로 드래그 할 수 있기를 원하지만 항목이 드롭 될 때 원래 항목을 목록 A에 그대로 유지해야합니다. 옵션과 이벤트를 확인했지만 그런 것은 없다고 생각합니다. 접근 방법이 있습니까?

---

처음 에는 this를 살펴보고 @Erez 답변도 읽으십시오.

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

    $("#sortable2").sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

---

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

---

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/

---

I know this is old, but I could not get Erez's answer to work, and Thorsten's didn't cut it for the project I need it for. This seems to work exactly how I need:

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

---

The answer of abuser2582707 works best for me. Except one error: You need to change the return to

return li.item.clone();

So it should be:

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

---

When using Erez's solution but for connecting 2 sortable portlets (basis was the portlet example code from http://jqueryui.com/sortable/#portlets), the toggle on the clone would not work. I added the following line before 'return li.clone();' to make it work.

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

This took me a while to figure out so I hope it helps someone.

ReferenceURL : https://stackoverflow.com/questions/6940390/how-do-i-duplicate-item-when-using-jquery-sortable