Jak połączyć wiele list sortowalnych ze sobą w interfejsie jQuery?

Question

Jestem nowy w jQuery i całkowicie walczę z używaniem interfejsu jQuery sortable.

Próbuję złożyć stronę, aby ułatwić grupowanie i zamawianie przedmiotów.

Moja strona zawiera listę grup, a każda grupa zawiera listę pozycji. Chcę, aby użytkownicy mogli być w stanie wykonać następujące czynności:

1. zmienić kolejność grup
2. kolejność elementów w grupach
3. przenieść elementy między grupami

Pierwsze dwa wymagania nie stanowią problemu. Jestem w stanie je uporządkować. Problem pojawia się w trzecim wymaganiu. Po prostu nie mogę połączyć tych list ze sobą. Może pomóc trochę kodu. Oto znaczniki.

<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> 

udało mi się rozwiązać poprzez umieszczenie listy $('#groupsList').sortable({}); i $('.itemsList').sortable({}); w document ready function. Próbowałem użyć opcji connectWith dla sortable, aby to działało, ale nie udało mi się spektakularnie. Chciałbym mieć listę każdy groupItemsX połączoną z każdą listą groupItemsX, ale samą w sobie. Jak mam to zrobić?

---

Myślałem, że nie muszę konkretnie łączyć listy z samą sobą, nie ma tu jakiegoś okrężnego odniesienia. Oczywiście nie pracuję z programem Excel, ale wydawało się, że może to spowodować niekończącą się rekursję, która spowodowałaby przepełnienie stosu lub coś takiego. Hmm. Przepraszam za kalambur. Nie mogłem się powstrzymać.

W każdym razie, ja starałem się zrobić coś takiego, i to nie działa:

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

Jestem pewien, że już całkowicie zniekształcone tam składnię, a przypuszczam, że to jest powód miałem zadać to pytanie w pierwszej kolejności. Czy filtrowanie aktualnego elementu z listy jest nawet konieczne lub pomocne?

Obie odpowiedzi dostarczone przez Adama i Jimmy'ego P działały w IE (chociaż zachowują się naprawdę dziwnie w FireFox, nadpisując elementy listy przy próbie ponownego sortowania). Przyjmuję jedną z twoich odpowiedzi i głosuję na drugiej, ale jeśli masz pomysły/sugestie dotyczące filtrowania, chciałbym to usłyszeć.

Answer 1

Czy możesz dołączyć składnię użytą do connectWith? Czy umieściłeś listę innych grup w nawiasach (nawet jeśli jest to selektor)? Czyli:

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

Answer 2

To powinno działać:

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

Answer 3

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

To pójść wszystko jest w porządku dla ciebie! robię to samo dla mnie. ŻADNA zmiana nie jest wymagana w kodzie HTML.