jquery sortable - 只允许在目标li中删除最后一个项目答案

【问题标题】：jquery sortable - allow only last item dropped in target lijquery sortable - 只允许在目标li中删除最后一个项目
【发布时间】：2013-07-08 17:44:31
【问题描述】：

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

这里是示例 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 列表（返回原点）。

谢谢。

【问题讨论】：

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

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

【讨论】：

【解决方案2】：

你的代码可以很简单

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

Updated Fiddle

不需要额外的迭代

【讨论】：