Nested Hierarchy Sortable List using jQuery

Hello,

I'm currently working on a user interface to allow a user to re-order a list of webpages aswell as moving them from the main navigation to the sub navigation and back again.

I ideally want it to work somewhere along these lines;
1. If a user drops a page on top of another page then it will be added to that pages sub nav.
2. If a user drops a page above/below another page then it will change the order of the pages as required.

I can get second one on that list quite simply using jQuery sortables but its getting the first part to work with the sortables I'm struggling with.

At the moment my html code it setup as show by the code below.

Any help or ideas would be gratefully received.

<ul>
    <li>
        Page 1
    </li>
    <li>
        Page 2
        <ul class="sub_nav">
            <li>Page 5</li>
            <li>Page 6</li>
        </ul>
    </li>
    <li>
        Page 3
    </li>
</ul>

Select allOpen in new window