Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#2492 closed bug (duplicate)

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 (1)

nested_sortable.diff (1005 bytes) - added by ebartels 12 years ago.

Download all attachments as: .zip

Change History (4)

comment:1 Changed 12 years ago by ebartels

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 12 years ago by ebartels

Attachment: nested_sortable.diff added

comment:2 Changed 12 years ago by paul

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.

comment:3 Changed 11 years ago by (none)

Milestone: 1.2.4

Milestone 1.2.4 deleted

Note: See TracTickets for help on using tickets.