issue with sortable and containment

issue with sortable and containment

The following sortable grid works for me:
  1. #sortable { list-style-type: none; margin: 0; padding: 0; } #sortable li { margin: 10px 10px 10px 10px; padding: 1px; float: left; width: 440px; height: 440px; }

  2. <script>
  3. $(function() {
  4. $( ""#sortable"" ).sortable({ });
  5. $( ""#sortable"" ).disableSelection();
  6. });
  7. </script>

  8. <div class="widgetcollection">

  9. <ul id="sortable">
  10. <li class="ui-state-default" id="1">some stuff</li>
  11. <li class="ui-state-default" id="2">some stuff</li>
  12. <li class="ui-state-default" id="3">some stuff</li>
  13. <li class="ui-state-default" id="4">some stuff</li>
  14. <li class="ui-state-default" id="5">some stuff</li>
  15. <li class="ui-state-default" id="6">some stuff</li>
  16. </ul>

  17. </div>
However, when I change it to:
  1. $( ""##sortable"" ).sortable({ containment: 'parent' });
...and then click and drag a grid element, the dragged grid element jumps up so that its bottom edge is flush with the top edge of the parent div.  Moving the mouse left/right moves the grid element left/right.  Moving the mouse up/down does not do anything to the grid element.  And, when I release the mouse button, the grid element always returns to its original location.

What am I doing wrong?