jQuery Sortable - Nested UL elements

Question

Consider the following markup..:

<dl class="table">
        <dt>UL drag/drop</dt>

        <dd>
            <ul> <!-- group 1 -->
                <li>Row 1, column 1</li>
                <li>Row 1, column 2</li>
                <li>Row 1, column 3</li>
            </ul>

            <ul> <!-- group 2 -->
                <li>Row 2, column 1</li>
                <li>Row 2, column 2</li>
                <li>

                    Row 2, column 3

                    <ul> <!-- sub-group 2 -->
                        <li>Row 2-1, column 1</li>
                        <li>Row 2-1, column 2</li>
                        <li>Row 2-1, column 3</li>
                    </ul>
                </li>
            </ul>

            <ul> <!-- group 3 -->
                <li>Row 3, column 1</li>
                <li>Row 3, column 2</li>
                <li>Row 3, column 3</li>
            </ul>
        </dd>
    </dl>

Implementing jQuery UI's Sortable plug-in on a flat list is easy, but how would you implement the ability to drag around groups of list-items, using the above structure?--e.g. move sub-group 2 into group 3 or group 1 into sub-group 2.

I imagine that this is not an easy task, so I will be attaching a bounty of 300 reputation points to this question as soon as I am able.

Answer 1

Hi,

I recently developed a plugin the manages nested sortable, creating new nested lists on the fly and allowing for any kind of movement, written for UI 1.8+.