Nested Hierarchy Sortable List using jQuery

Posted on 2009-04-28
Last Modified: 2012-05-06

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.


        Page 1



        Page 2

        <ul class="sub_nav">

            <li>Page 5</li>

            <li>Page 6</li>




        Page 3



Open in new window

Question by:sousflai
    1 Comment

    Accepted Solution

    I've manged to find a jQuery plugin that solves my problem.

    Hope this helps someone else!

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Join & Write a Comment

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now