Nested ULs and sortable

Nested ULs and sortable

I have the following markup for my nested UL structure:

  
    
   
  1.  <ul id="sortable-steps">
    2. 
   
  2.  <li id="li-step-0">Step 1</li>
    3. 
   
  3.  <ul id="ul-step-0">
    4. 
   
  4.  <li id="li-step-0-task-1">Task 1</li>
    5. 
   
  5.  <ul id="ul-step-0-task-1">
    6. 
   
  6.  <li>blah</li>
    7. 
   
  7.  <li>blah</li>
    8. 
   
  8.  </ul>
    9. 
   
  9.  <li id="li-step-0-task-2">Task 2</li>
    10. 
   
  10.  <ul id="ul-step-0-task-2">
    11. 
   
  11.  <li>blah</li>
    12. 
   
  12.  <li>blah</li>
    13. 
   
  13.  </ul>
    14. 
   
  14.  <li id="li-step-0-task-3">Task 3</li>
    15. 
   
  15.  <ul id="ul-step-0-task-3">
    16. 
   
  16.  <li>blah</li>
    17. 
   
  17.  <li>blah</li>
    18. 
   
  18.  </ul>
    19. 
   
  19.  </ul>
    20. 
   
  20.  <li id="li-step-1">Step 2</li>
    21. 
   
  21.  <ul id="ul-step-1">
    22. 
   
  22.  <li class="no-nodes">blah</li>
    23. 
   
  23.  <li class="no-nodes">blah</li>
    24. 
   
  24.  <li class="no-nodes">blah</li>
    25. 
   
  25.  <li class="no-nodes">blah</li>
    26. 
   
  26.  <li class="no-nodes">blah</li>
    27. 
   
  27.  </ul>
    28. 
   
  28. </ul>
    29.

 And I make the top level UL sortable with the following code:

  
    
   
  1.   $(function() {
    2. 
   
  2.  $("#sortable-steps").sortable();
    3. 
   
  3.  $("#sortable-steps").disableSelection();
    4. 
   
  4.  });
    5. 
   
  5. 
    
    6.
My problem is that when I drag a LI from the top level and put in somewhere else, none of the child nodes are moved with it - is there any way I can do this?