Come collego più elenchi ordinabili tra loro nell'interfaccia utente di jQuery?

Question

Sono nuovo di jQuery e sto facendo fatica ad usare ordinabile dell'interfaccia utente di jQuery.

Sto cercando di mettere insieme una pagina per facilitare il raggruppamento e l'ordinamento degli articoli.

La mia pagina ha un elenco di gruppi e ogni gruppo contiene un elenco di elementi. Voglio consentire agli utenti di essere in grado di fare quanto segue:

  

  
1. Riordina i gruppi
  
2. Riordina gli elementi all'interno dei gruppi
  
3. Sposta gli elementi tra i gruppi
  

I primi due requisiti non sono un problema. Sono in grado di ordinarli bene. Il problema si presenta con il terzo requisito. Non riesco proprio a collegare questi elenchi tra loro. Alcuni codici potrebbero essere d'aiuto. Ecco il markup.

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

Sono stato in grado di ordinare gli elenchi mettendo $ ('# groupsList'). sortable ({}); e $ ('. itemsList'). sortable ({}) ; nella funzione documento pronto . Ho provato a usare l'opzione connectWith per ordinabile per farlo funzionare, ma ho fallito in modo spettacolare. Quello che mi piacerebbe fare è avere tutti gli elenchi groupItemsX collegati a tutti gli elenchi groupItemsX ma se stesso. Come dovrei farlo?

---

Pensavo di dover specificamente non collegare un elenco a se stesso meno che ci fosse una sorta di riferimento circolare. Certo, non sto lavorando con Excel, ma sembrava che ciò potesse causare una sorta di ricorsione infinita che avrebbe causato un overflow dello stack o qualcosa del genere. Hmm. Scusate il gioco di parole. Non ho potuto aiutare me stesso.

Comunque, stavo cercando di fare qualcosa del genere, e non funzionava:

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

Sono sicuro di aver completamente rovinato la sintassi lì, e suppongo che questo sia il motivo per cui ho dovuto porre la domanda in primo luogo. È anche necessario o utile dal punto di vista delle prestazioni filtrare l'elemento corrente dall'elenco?

Entrambe le risposte fornite da Adam e JimmyP hanno funzionato in IE (anche se si comportano in modo davvero strano in FireFox, sovrascrivendo gli elementi dell'elenco quando si tenta di riordinare). Accetterò una delle tue risposte e voterò sull'altra, ma se hai idee / suggerimenti sul filtro, mi piacerebbe ascoltarlo.

Answer 1

Puoi includere la sintassi che hai usato per connectWith ? Hai inserito l'elenco di altri gruppi tra parentesi (anche se si tratta di un selettore)? Cioè:

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

Answer 2

Questo dovrebbe funzionare:

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

Answer 3

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

Questo andrà bene per te! fare lo stesso qui per me. Nessuna modifica richiesta nel tuo HTML.