Использование JQuery UI сортируется для сортировки 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

Вы можете использовать одну подпрограмму для обоих списков, если вы используете идентификаторы для идентификации каждого списка, и классы, чтобы идентифицировать все списки, которые могут быть отсортированы.

В демонстрации 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. НОВАЯ позиция индекса (теперь у нас есть позиция START и позиции STOP)
   c. Имя списка другой

3. IFpost (новая позиция индекса) больше, чем pre (исходное положение):
   а. Мы перемещаем пункт DOWN, поэтому ...
   b. Когда мы программно перемещаем товар в другом списке, мы должны использовать insertAfter
   ELSE
   a. Мы перемещаем элемент UP в списке, поэтому
   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/