2

我有数字列表和两个目标块。我想将数字放到目标块中，但只保留最后一个丢弃的项目。

这是示例 jsfiddle -演示 - 仅允许拖动一项

代码 -

$(function() {
    $("ul.droptrue").sortable({
        connectWith: "ul",
    });

    $("ul.dropfalse").sortable({
        connectWith: "ul",
        dropOnEmpty: false
    });

    $("#sortable1, #sortable2, #sortable3").disableSelection();

    $("#sortable3,#sortable4").on("sortreceive", function(event, ui) {
        var $list = $(this);

        if ($list.children().length > 1) {
            $(ui.sender).sortable('cancel');

            //Move the existing one back to sortable1
            //Only keep the last moved element
        }
    });
});

在上面的例子中，如果用户尝试将第二个数字拖到 sortable3 或 4，它不允许另一个数字。我期望的行为是，如果拖动新数字，前一个数字应该返回到 sortable1 列表（返回原点）。

谢谢。

4

2 回答 2

1

删除您的 sortreceive 并改用它

$("#sortable1").on("sortremove", function(event, ui) {
    ui.item.prependTo( ui.item.parent());
    $.each(ui.item.parent().children(), function(index, item) {
        if ( index > 0 )
            $(this).appendTo($("#sortable1"));
    });
});

见http://jsfiddle.net/382dy/

于 2013-07-08T20:54:16.320 回答
0

您的代码可以很简单

 $("ul.droptrue:not(:#sortable1)").on("sortreceive", function (event, ui) {
    $(this).children().not(ui.item).appendTo("#sortable1")
});

更新小提琴

无需额外的迭代

于 2014-08-16T10:22:27.103 回答