JQuery UI Sortable Sections (divs) with Sort-able List Inside

Question

I was hoping someone could point me at a tutorial / example for this. I'm sure its been done I'm just not finding it. I need a "nested" sorting feature where there are sort-able blocks (probably div's) that represent sections or categories.

Then inside of the sections area I need a list that is also sortable.

So for example say I have the following sections:

Breakfast
  - Cereal
  - Coffee
  - Juice

Lunch 
  - Soup
  - Sandwich

Dinner
  - Stew

I want to be able to drag and re order Breakfast, Lunch and Dinner and have the sub list move with it. Then I want to be able to sort the sub lists anywhere. To clarify I would like to be able to move Coffee from the Breakfast area to the Dinner area if I want.

Please and thank you for the help.

---

Ok I was just using the wrong selector and it wasnt working as expected. By default JQuery UI does exactly what I need. Heres my code for anyone who stumbles upon this.

<div id='section-block'>
    <div>
        <span>Section 1</span>
        <ul id="sortable1" class="connectedSortable">
          <li class="ui-state-default">Item 1a</li>
          <li class="ui-state-default">Item 2a</li>
          <li class="ui-state-default">Item 3a</li>
          <li class="ui-state-default">Item 4a</li>
          <li class="ui-state-default">Item 5a</li>
        </ul>
    </div>
    <div>
        <span>Section 2</span>
        <ul id="sortable2" class="connectedSortable">
          <li class="ui-state-highlight">Item 1b</li>
          <li class="ui-state-highlight">Item 2b</li>
          <li class="ui-state-highlight">Item 3b</li>
          <li class="ui-state-highlight">Item 4b</li>
          <li class="ui-state-highlight">Item 5b</li>
        </ul>
    </div>
</div>


<script type="text/javascript">
    $(function() {
        $("#section-block").sortable().disableSelection();

        $("#sortable1, #sortable2").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
</script>

Answer 1

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

That will help you with transferring items from one list to another. I would say you have the right idea going, make an "outer" sortable which uses the divs that, in them, contain another sortable list with the "transferrable" items.