使用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/