Comment puis-je connecter plusieurs listes triables les uns aux autres dans l'INTERFACE utilisateur de jQuery?

Je suis nouveau sur jQuery, et je suis totalement en difficulté avec l'utilisation de jQuery UI sortable.

Je vais essayer de mettre sur pied une page à faciliter le regroupement et l'ordre des éléments.

Ma page a une liste de groupes, et chaque groupe contient une liste d'éléments. Je veux permettre aux utilisateurs d'être en mesure de faire ce qui suit:

1. Réorganiser les groupes
2. Réorganiser les éléments dans les groupes
3. Déplacer des éléments entre les groupes

Les deux premières exigences ne sont pas un problème. Je suis capable de les trier correctement. Le problème vient avec la troisième exigence. Je ne peux pas connecter ces listes les unes des autres. Un code peut aider. Voici le balisage.

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

J'ai été en mesure de trier les listes par la mise $('#groupsList').sortable({}); et $('.itemsList').sortable({}); dans le document ready function. J'ai essayé d'utiliser le connectWith option pour sortable pour le faire fonctionner, mais j'ai échoué de façon spectaculaire. Ce que je voudrais faire est de les avoir tous les groupItemsX liste de connectés à chaque groupItemsX liste, mais lui-même. Comment dois-je faire?

---

Je pensais que je devais ne pas connecter une liste à lui-même, moins il y a une sorte de référence circulaire. Certes, je ne suis pas travailler avec Excel, mais il semblait que pourrait causer une certaine sorte de ne jamais se terminant récursivité qui serait de provoquer un débordement de pile ou quelque chose. Hmm. Désolé pour le jeu de mots. Ne pouvait pas aider moi-même.

De toute façon, j'ai essayé de faire quelque chose comme cela, et il ne fonctionnait pas:

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

Je suis sûr que j'ai complètement mutilé de la syntaxe, et je suppose que c'est la raison pour laquelle je devais poser la question en premier lieu. Est-il même nécessaire ou utile en terme de performance pour filtrer l'élément courant de la liste?

À la fois des réponses fournies par Adam et JimmyP travaillé dans IE (bien qu'ils se comportent vraiment bizarrement dans FireFox, en écrasant les éléments de la liste lorsque vous essayez de re-trier). Je vais recevoir une de vos réponses et de voter sur l'autre, mais si vous avez des idées/suggestions sur le filtrage, j'aimerais l'entendre.