Como faço para conectar várias listas classificáveis ??uns aos outros em jQuery UI?

Question

Eu sou novo para jQuery, e eu estou totalmente lutando com usando sortable do jQuery UI.

Eu estou tentando montar uma página para facilitar o agrupamento e ordenação dos itens.

A minha página tem uma lista de grupos, e cada grupo contém uma lista de itens. Quero permitir que os usuários sejam capazes de fazer o seguinte:

1. reordenar os grupos
2. reordenar os itens dentro dos grupos
3. Mova os itens entre os grupos

Os primeiros dois requisitos não são problema. Eu sou capaz de classificá-los muito bem. O problema surge com a terceira exigência. Eu só não pode conectar essas listas para o outro. Algum código pode ajudar. Aqui está a marcação.

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

Eu era capaz de classificar as listas, colocando $('#groupsList').sortable({}); e $('.itemsList').sortable({}); na document ready function. Eu tentei usar a opção connectWith para sortable para fazer o trabalho, mas eu falhou espetacularmente. O que eu gostaria de fazer é ter a lista de todos os groupItemsX conectado a cada lista groupItemsX mas em si. Como devo fazer isso?

---

Eu estava pensando que eu precisava para, especificamente, não ligar uma lista para se menos haver algum tipo de referência circular. Concedido, eu não estou trabalhando com o Excel, mas parecia que poderia causar algum tipo de interminável recursão que poderia causar um estouro de pilha ou algo assim. Hmm. Desculpem o trocadilho. não poderia me ajudar.

De qualquer forma, eu estava tentando fazer algo assim, e ele não estava funcionando:

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

Eu tenho certeza que eu mutilou completamente a sintaxe lá, e acho que essa é a razão pela qual eu tive que fazer a pergunta em primeiro lugar. Será que é mesmo necessário ou útil em termos de performance para filtrar o item atual fora da lista?

Tanto as respostas fornecidas por Adão e JimmyP trabalhou no IE (embora eles se comportam realmente estranhamente no FireFox, substituindo os itens da lista quando você tenta re-ordenação). Eu vou aceitar uma das suas respostas e votação sobre o outro, mas se você tem idéias / sugestões sobre a filtragem, eu gostaria de ouvi-lo.

Answer 1

Você pode incluir a sintaxe que você usou para connectWith? Será que quis colocar a lista de outros grupos dentro de parênteses (mesmo que seja um seletor)? Ou seja:

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

Answer 2

Isso deve funcionar:

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

Answer 3

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

Isso vai tudo muito bem para você! fazendo o mesmo por mim aqui. NO mudança necessária em seu HTML.