jquery可排序 - 只允許在目標li中丟棄最後一個項目

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

無需額外的迭代