issue with sortable and containment
The following sortable grid works for me:
- #sortable { list-style-type: none; margin: 0; padding: 0; } #sortable li { margin: 10px 10px 10px 10px; padding: 1px; float: left; width: 440px; height: 440px; }
- <script>
- $(function() {
- $( ""#sortable"" ).sortable({ });
- $( ""#sortable"" ).disableSelection();
- });
- </script>
- <div class="widgetcollection">
- <ul id="sortable">
- <li class="ui-state-default" id="1">some stuff</li>
- <li class="ui-state-default" id="2">some stuff</li>
- <li class="ui-state-default" id="3">some stuff</li>
- <li class="ui-state-default" id="4">some stuff</li>
- <li class="ui-state-default" id="5">some stuff</li>
- <li class="ui-state-default" id="6">some stuff</li>
- </ul>
- </div>
However, when I change it to:
- $( ""##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?