Как дублировать элемент при использовании сортировки jquery?

Я использую этот метод http://jqueryui.com/demos/sortable/#connect-lists для подключения двух списков, которые у меня есть. Я хочу, чтобы иметь возможность перетащить из списка A в список B, но когда элемент отбрасывается, мне нужно сохранить исходный файл еще в списке A. Я проверил параметры и события, но я считаю, что нет ничего подобного. Любые подходы?

Ответ 1

Для начала просмотрите это и прочитайте также ответ @Erez.

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

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

Ответ 2

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

Ответ 3

Решение 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/

Ответ 4

Я знаю, что это старо, но я не мог заставить Эрез ответить на работу, и Торстен не сократил его для проекта, в котором я нуждаюсь. Это похоже на то, как мне нужно:

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

Ответ 5

Ответ abuser2582707 работает лучше всего для меня. За исключением одной ошибки: вам нужно изменить возврат на

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();

Ответ 6

При использовании решения 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();
});

Мне потребовалось некоторое время, чтобы понять, поэтому я надеюсь, что это поможет кому-то.