使用jquery界面排序一次排序2列表

Question

我有一个非常简单的问题。使用JQuery UI可排序，我想一次排序两个相同的列表。假设我有两个5个可拖动对象的列表。对一个列表排序也会以相同的方式对另一个列表进行排序。有没有办法用JQuery UI做到这一点？

我有这样的事情开始...

<div class="list1"> 
    <div class="quote1">1</div> 
    <div class="quote2">2</div> 
    <div class="quote3">3</div> 
    <div class="quote4">4</div> 
    <div class="quote5">5</div> 
</div> 

<div class="list2"> 
    <div class="quote1">1</div> 
    <div class="quote2">2</div> 
    <div class="quote3">3</div> 
    <div class="quote4">4</div> 
    <div class="quote5">5</div> 
</div> 

<script> 
$(function() { 
    $(".list1").sortable(); 
    $(".list1").disableSelection(); 

    $(".list2").sortable(); 
    $(".list2").disableSelection(); 
}); 
</script> 

Answer 1

你可以用一个常规的两个列表，如果你使用的ID来识别每个列表和类，以确定可以排序的所有名单。

在jsFiddle演示中，请注意更改为您的HTML。

jsFiddle Demo

这里是工作代码：

var lst, pre, post; //lst == name of list being sorted 

$(".sortlist").sortable({ 
    start:function(event, ui){ 
     pre = ui.item.index(); 
    }, 
    stop: function(event, ui) { 
     lst = $(this).attr('id'); 
     post = ui.item.index(); 
     other = (lst == 'list1') ? 'list2' : 'list1'; 
     //Use insertBefore if moving UP, or insertAfter if moving DOWN 
     if (post > pre) { 
      $('#'+other+ ' div:eq(' +pre+ ')').insertAfter('#'+other+ ' div:eq(' +post+ ')'); 
     }else{ 
      $('#'+other+ ' div:eq(' +pre+ ')').insertBefore('#'+other+ ' div:eq(' +post+ ')'); 
     } 
    } 
}).disableSelection(); 

---

说明：

1. 当你拖动一个项目，这种情况发生的第一件事情是start:功能。在那里，我们抓取物品的当前索引位置并将其存储为pre

2. 当物品被丢弃时，执行stop:函数。在这里，我们想要得到：
   a。我们正在排序的列表
   b。 NEW索引位置（所以现在我们有START位置和STOP位置）
   c。所述其他列表

3. 的名称IFpost（新的索引位置）比pre的情况下（原来的位置）：
   一个。我们正在将项目向下移动，所以...
   b。当我们在另一个列表中以编程方式重新定位物品时，我们必须使用insertAfter
   否则
   a。我们将这个项目移到列表中，所以
   b。在其他列表中移动项目时，我们必须使用insertBefore方法。

4. 在if语句中，变量值告诉jQuery要移动哪个项目并将其放到哪里。这可能有助于查看没有变量的代码。因此，作为一个例子，如果我List1中移动的第一个项目到列表的底部，这里就是我们想要的jQuery做其他列表：

$('#list2 div:eq(0)').insertAfter('#list2 div:eq(4)');

希望有所帮助。

Answer 2

此方法适用于实时为您拖动：

var currentIndex; 
$(function() { 
    $(".list").sortable({ 
     start: function(event, ui) { 
      currentIndex = ui.helper.index(); 
     }, 
     change: function(event, ui) { 
      var indexCount = ui.item.parent().find('div:not(.ui-sortable-helper)'); 
      var sortClass = '.'+ui.item.attr('class').split(' ')[0]; 
      var parent = $('.list').not(ui.item.parent()); 
      if(currentIndex > ui.placeholder.index()){ 
       parent.find('div').eq(indexCount.index(ui.placeholder)).before(parent.find(sortClass)); 
      } 
      else 
       parent.find('div').eq(indexCount.index(ui.placeholder)).after(parent.find(sortClass)); 
      currentIndex = ui.placeholder.index(); 
     } 
    }); 
    $(".list").disableSelection(); 
}); 

http://jsfiddle.net/trevordowdle/EXk7T/2/