Как мне соединить несколько сортируемых списков друг с другом в jQuery UI? - PullRequest
Новая
       23

Как мне соединить несколько сортируемых списков друг с другом в jQuery UI?

32 голосов
/ 21 ноября 2008

Я новичок в jQuery и полностью борюсь с использованием пользовательского интерфейса jQuery sortable.

Я пытаюсь собрать страницу, чтобы упростить группирование и упорядочение элементов.

На моей странице есть список групп, а каждая группа содержит список элементов. Я хочу, чтобы пользователи могли выполнять следующие действия:

  1. Изменение порядка групп
  2. Изменение порядка элементов в группах
  3. Перемещение предметов между группами

Первые два требования не являются проблемой. Я могу отсортировать их просто отлично. Проблема приходит с третьим требованием. Я просто не могу соединить эти списки друг с другом. Некоторый код может помочь. Вот разметка. 

<ul id="groupsList" class="groupsList">  
  <li id="group1" class="group">Group 1  
    <ul id="groupItems1" class="itemsList">  
      <li id="item1-1" class="item">Item 1.1</li>  
      <li id="item1-2" class="item">Item 1.2</li>  
    </ul>  
  </li>
  <li id="group2" class="group">Group 2  
    <ul id="groupItems2" class="itemsList">  
      <li id="item2-1" class="item">Item 2.1</li>  
      <li id="item2-2" class="item">Item 2.2</li>  
    </ul>  
  </li>
  <li id="group3" class="group">Group 3  
    <ul id="groupItems3" class="itemsList">  
      <li id="item3-1" class="item">Item 3.1</li>  
      <li id="item3-2" class="item">Item 3.2</li>  
    </ul>  
  </li>
</ul>

Мне удалось отсортировать списки, поместив $('#groupsList').sortable({}); и $('.itemsList').sortable({}); в document ready function. Я попытался использовать опцию connectWith для sortable, чтобы она заработала, но я потерпел неудачу. Я хотел бы, чтобы каждый список groupItemsX был связан с каждым списком groupItemsX, кроме него самого. Как мне это сделать?

Я думал, что мне нужно специально не связывать список с самим собой, чтобы не было какой-то циклической ссылки. Конечно, я не работаю с Excel, но казалось, что это может вызвать некую бесконечную рекурсию, которая может вызвать переполнение стека или что-то в этом роде. Хм. Извините за каламбур. Не мог с собой поделать.

Во всяком случае, я пытался сделать что-то подобное, и это не сработало: 

$('.groupsList').sortable(); // worked great  
$('.groupsList').each( function () {  
    $(this).sortable( {  
        connectWith: ['.groupsList':not('#'+ $(this).attr('id') )];  
    });  
});

Я уверен, что там я полностью исказил синтаксис, и я полагаю, что именно поэтому мне пришлось сначала задать вопрос. Есть ли необходимость или полезность с точки зрения производительности, чтобы отфильтровать текущий элемент из списка?

Оба ответа, предоставленные Адамом и JimmyP, работали в IE (хотя они очень странно себя ведут в FireFox, перезаписывая элементы списка при попытке повторной сортировки). Я приму один из ваших ответов и проголосую за другой, но если у вас есть идеи / предложения по поводу фильтрации, я бы хотел их услышать.

Ответы [ 3 ]

23 голосов
/ 22 ноября 2008

Можете ли вы включить синтаксис, который вы использовали для connectWith? Вы поместили список других групп в скобки (даже если это селектор)? То есть: 

...sortable({connectWith:['.group'], ... }
17 голосов
/ 22 ноября 2008

Это должно работать: 

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});
2 голосов
/ 05 июня 2012 
 $(function() {
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
                connectWith: ".itemsList"
            }).disableSelection();
        });

Все будет хорошо для вас! делаю то же самое здесь для меня. Никаких изменений не требуется в вашем HTML.

...