Putting a sortable list inside another sortable list element leads to an error in some circumstances.

Test Case:

<ul class="outer">
    <li class="sortable-outer">
        <p>Outer Item 1</p>
        <ul class="inner">
            <li class="sortable-inner"><div>Inner Item 1</div></li>
            <li class="sortable-inner"><div>Inner Item 2</div></li>
            <li class="sortable-inner"><div>Inner Item 3</div></li>
        </ul>
    </li>
    <li class="sortable-outer">
        <p>Outer Item 2</p>
        <ul class="inner">
            <li class="sortable-inner"><div>Inner Item 1</div></li>
            <li class="sortable-inner"><div>Inner Item 2</div></li>
            <li class="sortable-inner"><div>Inner Item 3</div></li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
$(function() {
    $('.inner').sortable({items: ".sortable-inner"});
    $('.outer').sortable({items: ".sortable-outer"});
});
</script>

The test case contains an outer list whose elements are sortable, each containing an inner list whose elements are sortable independently. Trying to sort the inner list will fail.

In ui.sortable.js line 79 the code searches for a node marked with ''ui-sortable-item''. The search begins at the clicked element and searches up through the element's parent nodes. The purpose of the code seems to be to find the element we want to be moving, starting from the element that generated the mouse event.

The problem is that with nested sortable lists, the code will continue to search up the tree and select the outer-most node that matches, which will be in the outer list even when trying to drag an item from the inner list.

Note: the divs inside the the inner list items are important since items without any child nodes will avoid the error.