Skip to main content

Search and Top Navigation

#2492 closed bug (duplicate)

Opened March 12, 2008 04:58AM UTC

Closed March 14, 2008 06:38PM UTC

Last modified May 24, 2008 03:39AM UTC

nested lists causing problems in ui.sortable

Reported by: ebartels Owned by: paul
Priority: major Milestone:
Component: ui.core Version: 1.2.3
Keywords: sortable nested Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (3)

Changed March 12, 2008 05:14AM UTC by ebartels comment:1

The patch will find the inner-most ''ui-sortable-item'' rather than the outer-most, or in other words, the matching parent closest to the element which generated the mouse event.

Changed March 14, 2008 06:38PM UTC by paul comment:2

resolution: → duplicate
status: newclosed

This is somewhat more complicated and to half extend a duplicate of another issue. This will be fixed with several other nested issues.

Changed May 24, 2008 03:39AM UTC by comment:3

milestone: 1.2.4

Milestone 1.2.4 deleted