jquery可排序，如何防止列表移動到其他連接列表

Question

我有三個列表，他們都與jquery-ui排序連接，第一個列表是Backlog工作，第二個是在進度和最後一個完成。

我想將項目從第一個列表移動到第二個，從第二個移動到第三個，如果項目從第一個列表移動到第三個列表，列表不接受元素。

現在全部完成，但我不知道如何防止項目開始移動到其他連接列表中，例如，如果有「a」（或...）類？

$(function(){ 
$(".tasks").sortable({ 
    connectWith : ".tasks", 
    handle : "h2", 
    items : ".task", 
    opaciry : 0.6, 
    revert : true, 
    placeholder : "ui-state-highlight", 
    forcePlaceholderSize : true, 
    remove : function(e,obj){ 
     $(".tasks").each(function(){ 
      if($(this).children(".task").length == 0){ 
       $(this).addClass("empty"); 
      } else if($(this).hasClass("empty")) { 
       $(this).removeClass("empty"); 
      } 
     }); 
    }, 
    out : function(e,obj){ 
     $(".col").removeClass("red green"); 
     $(".tasks").sortable("enable"); 
    } 
}); 
$("#p .tasks").sortable({ 
    receive : function(e,obj){ 
     obj.item.removeClass("tb").addClass("td"); 
    }, 
    over : function(e,obj){ 
     if(obj.item.hasClass("tb")) { 
      $("#p").addClass("green"); 
     } else { 
      $("#p").addClass("red"); 
      $("#p .tasks").sortable("disable"); 
      return false; 
     } 
    } 
}); 

}）;

Answer 1

這樣做的一種方法是使用'receive'回調和'cancel'方法來驗證任何移動。 jsFiddle

$(".tasks").sortable({ 
    connectWith: ".tasks", 
    receive: function (event, ui) { 
     var validMove = function (a, b) { 
       var changeMatrix = [ 
        [true, true, false], 
        [true, true, true], 
        [false, true, true] 
       ]; 
       return changeMatrix[a][b]; 
      }, 
      $lists, endList, startIndex, endIndex; 
     $lists = $(".tasks"); 
     endList = $(ui.item).closest('.ui-sortable').get(0); 

     startIndex = $lists.index(ui.sender); 
     endIndex = $lists.index(endList); 

     if (!validMove(startIndex, endIndex)) { 
      $(ui.sender).sortable('cancel'); 
     } 
    } 
}).disableSelection(); 

在這裏，我已經取得的，用於驗證基於源和目的地列表的索引上可接受的移動和的函數的矩陣。由於.sortable()提供的ui對象作爲參數，源列表很容易得到，目標列表需要一些快速遍歷。