list ui下载 - 使用jquery sortable时如何复制项目?




ui中文 ui教程 (6)

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


Answers

$("#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/http://jsfiddle.net/v265q/190/


使用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();
});

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


我知道这已经过时了,但是我无法得到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();

首先, 看看这个 ,并阅读@Erez的答案。

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

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

只需通过检查布尔值来检查可见性,例如:

if (this.hidden === false) {
    // Your code
}

我为每个函数使用了这个代码。 否则,您可以使用is(':visible')来检查元素的可见性。





jquery list drag-and-drop duplicates jquery-ui-sortable