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?
// If I use "sortupdate" I get little to no response. If I use "mouseup",
// I can at least get an alert to return the value of thisId.
// Note: I am sad that console.log is blocked in Firefox,
// because its DOM inspector is better than Chrome's
// the (.navBar li) have ids of "nav1, nav2" and so on,
// and the (.containerDiv .itemDiv) have corresponding ids of "item1, item2"
// which is my way of attempting to make it easier to link them.
// This line is my attempt to target the (.containerDiv .itemDiv) which directly
// corresponds to the (.navBar li) which is currently being sorted:
var tempId = "#" + $(this).attr('id').replace("nav","item");
// When this (.navBar li) is updated after a sort drag,
// trigger the "sortupdate" event on the corresponding (.containerDiv .itemDiv):
I've politely waited without complaint for almost a week for some kind of acknowledgement or reply but received none. Does anyone have the ability to help me here, or should I be asking somewhere else?
Just to prove that I'm doing my research, I've found several interesting and possibly helpful Stackoverflow threads related to my needs, but despite trying various assortments of what I've read and what I have, I still have not arrived at a workable solution. Here are links to the threads I've looked at:
It's worth noting that I not only want to have the sorting reciprocated between sortables, but I also want to still be able to take advantage of the serialize functionality so I can save their positions to a database for later use.