使用 jquery 可排序时如何复制项目？答案

【问题标题】：How do I duplicate item when using jquery sortable?使用 jquery 可排序时如何复制项目？
【发布时间】：2011-10-19 21:39:57
【问题描述】：

我正在使用这种方法http://jqueryui.com/demos/sortable/#connect-lists 来连接我拥有的两个列表。我希望能够从列表 A 拖动到列表 B，但是当项目被删除时，我需要将原始项目保留在列表 A 中。我检查了选项和事件，但我相信没有这样的事情。有什么办法吗？

【问题讨论】：

好问题。我也很难处理这方面的文档。
很难找到解决方案。好问题。

标签： jquery list drag-and-drop duplicates jquery-ui-sortable

【解决方案1】：

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

【讨论】：

这种方法比 Thorsten 的方法更可取，因为它保留了原始列表的顺序。
完美运行！这确实应该被标记为正确答案。
比标记为正确的答案要好得多。这会复制并保留订单。

【解决方案2】：

首先，have a look at 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();
});

【讨论】：

这种方法的缺点是不保留 $('#sortable2') 的顺序。前任。如果您将一个项目放入列表顶部的 $('#sortable2') 中，此解决方案将在列表底部呈现已放置的项目。 Erez 在下面的回答确实保留了掉落的位置，并且在我的用例中是一个更好的解决方案。

【解决方案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/

【讨论】：

在第一个列表中使用隐藏的占位符将使其具有从确切位置拖动的共同效果，就像jsfiddle.net/BrianDillingham/v265q/320

【解决方案4】：

我知道这已经过时了，但我无法让 Erez 的答案起作用，而且 Thorsten 没有为我需要它的项目剪掉它。这似乎完全符合我的需要：

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

【讨论】：

是的，这个解决方案更好，因为它使用 li.item 所以它可以与多个元素一起使用。谢谢它帮助了我。
实际上我的情况甚至不需要return li.item.clone();
你在吗，你能告诉我如何克隆多个项目jsfiddle.net/mplungjan/8sfx1z9b

【解决方案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 个可排序的 portlet（基础是来自http://jqueryui.com/sortable/#portlets 的 portlet 示例代码）时，克隆上的切换将不起作用。我在'return li.clone();'之前添加了以下行让它发挥作用。

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

这花了我一段时间才弄清楚，所以我希望它对某人有所帮助。

【讨论】：