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>

Open in new window

sousflaiAsked:
Who is Participating?
 
sousflaiConnect With a Mentor Author Commented:
I've manged to find a jQuery plugin that solves my problem.

http://www.jstree.com

Hope this helps someone else!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.