jquery sortable:如何同步2个可排序列表?

时间:2013-08-03 09:50:55

标签: jquery-ui jquery-ui-sortable

我有两个可分类的列表。我想同步2个列表 - 当移动一个列表项时,另一个列表中相关项的位置也将移动。 你会推荐一种功能或方法供我学习吗?

1 个答案:

答案 0 :(得分:2)

这是一个非常糟糕的黑客,但它可能会给你一些想法开始:

<强> 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();
 });

这会扩展得更好,但它不是那么漂亮。