jquery sortable：如何同步2個可排序列表？

Question

我有兩個獨立工作的可排序列表。我想同步2個列表 - 當一個列表項目被移動時，另一個列表中相關項目的位置也會移動。 你會推薦一個功能或方法讓我學習嗎？

Answer 1

這是一個非常糟糕黑客攻擊，但它可能給你一些想法，開始出來：

Working Example

$(function() { 
    $('#sortable').sortable({ 
     update: function (event, ui) { 
      var x1 = $('#X1').position().top +140, 
       x2 = $('#X2').position().top +140, 
       x3 = $('#X3').position().top +140; 
      $('#sortable2 li').css({ 
       position:'absolute', 
       width: $('#sortable li').width() 
      }); 
      $('#Y1').animate({ 
       'top': x1 
      }); 
      $('#Y2').animate({ 
       'top': x2 
      }); 
      $('#Y3').animate({ 
       'top': x3 
      }); 
     } 
    }); 

    $("#sortable").disableSelection(); 
}); 

我說這是一個非常糟糕的黑客，因爲它顯然不會很好地縮放...

您可能需要使用update function並可能需要某種animation。

另一種辦法是把剛纔複製的HTML：

Working Example 2

$(function() { 
    $("#sortable").sortable({ 
     update: function (event, ui) { 
      $('#sortable2').html($('#sortable').html()); 
     } 
    }); 
    $("#sortable").disableSelection(); 
}); 

這將規模好多了，但它不是漂亮。