How do I connect multiple sortable lists to each other in jQuery UI?

Question

I'm new to jQuery, and I'm totally struggling with using jQuery UI's sortable. I'm trying to put together a page to facilitate grouping and ordering of items. My page has a list of groups, and each group contains a list of items. I want to allow users to be able to do the following:
1. Reorder the groups
2. Reorder the items within the groups
3. Move the items between the groups

The first two requirements are no problem. I'm able to sort them just fine. The problem comes in with the third requirement. I just can't connect those lists to each other. Some code might help. Here's the 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>

I was able to sort the lists by putting $('#groupsList').sortable({}); and $('.itemsList').sortable({}); in the document ready function. I tried using the connectWith option for sortable to make it work, but I failed spectacularly. What I'd like to do is have the every groupItemsX list connected to every groupItemsX list but itself. How should I do that?

Answer 1

Can you include the syntax you used for connectWith? Did you place the list of other groups inside brackets(even if it's a selector)? That is:

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

Answer 2

This should work:

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

Answer 3

I was thinking I needed to specifically not connect a list to itself less there be some sort of circular reference. Granted, I'm not working with Excel, but it seemed like that could cause some sort of never ending recursion that would cause a stack overflow or something. Hmm. Sorry for the pun. Couldn't help myself.

Anyway, I was trying to do something like this, and it wasn't working:

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

I'm sure I've completely mangled the syntax there, and I suppose that's the reason I had to ask the question in the first place. Is it even necessary or helpful performance-wise to filter the current item out of the list?

Both of the answers provided by Adam and JimmyP worked in IE (although they behave really oddly in FireFox, overwriting list items when you try to re-sort). I'll accept one of your answers and vote on the other, but if you have ideas/ suggestions about the filtering, I'd like to hear it.

Answer 4

Try this:

http://jqueryui.com/demos/sortable/#connect-lists