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

Я новичок в jQuery, и я полностью борюсь с использованием jQuery UI sortable.

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

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

Изменить порядок групп

Изменить порядок элементов внутри групп

Переместить элементы между группами

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

<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, переписывая элементы списка, когда вы пытаетесь повторно сортировать). Я соглашусь с одним из ваших ответов и проголосую за другого, но если у вас есть идеи/предложения по фильтрации, я бы хотел это услышать.

Ответ 1

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

...sortable({connectWith:['.group'], ... }

Ответ 2

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

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});

Ответ 3

 $(function() {
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
                connectWith: ".itemsList"
            }).disableSelection();
        });

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