Question

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

以下是jsfiddle示例 - demo - which allows only one item drag

代码 -

$(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列表（返回原点）。

感谢。

Answer 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/

Answer 2

您的代码可以像

一样简单

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

Updated Fiddle

无需额外迭代

jquery sortable - 仅允许在目标li中删除最后一项

2 个答案: