I have two elements on my page, a header nav, and a content area with containers that correspond to each header list item. Currently, I have Sortable attached to both, allowing me to rearrange the visual order of both the navigation elements, and the content containers. The behaviour I am trying to achieve is such that when I drag a navigation element, the content container moves with it, and when I drop the navigation element in a new position within the list, the content container sticks to its new position in the content area as well. The website I am working on is an intranet page, so I cannot provide a link, but I have included a diagram below:
Is there a simple way to link the two Sortables so they behave in this fashion?
On a related note, I would also like to have the rearranged states remain persistent between sessions. Does the Sortable plugin provide a method I could use to store and recall this information (either by cookies, or by using AJAX to save the state to the user account in the database on the back-end).
I've only been using jQueryUI for a day, and I'm already very impressed. I used to abhor the idea of relying on a framework for anything, but this has saved me so much time on this project already.
EDIT: I feel I must clarify one thing: I don't want to use the navigation items as "handles" to drag the content items. I want to also be able to drag the content item and have the navigation respond accordingly, completely reciprocal between the navigation and the content.
EDIT 2: I can't think of how to do this without maybe modifying the Sortable plugin. I tried making the navigation items the handles for the corresponding content items and the same the other way, but that didn't work. I tried figuring out how to get the Sortable "update" event on the navigation items to cause the corresponding content item to move, but I can't see how to trigger a sort action programmatically. How do I do this?