Using multiple inline nested sortable jquery lists is a great way to build drop down menu systems. Unfortunately the sortable function fails to handle inline lists well. To overcome this I generated a small function to get a string I can use later (after sending it via ajax) to get the new locations of the items. The list will come in the same order they are on the page, and will attached both the items ID and it’s parents ID (if it has one).

Some things to know about how the list system was set up, first, every item that was going to be saved has an ID tag attached to it that contained it’s ID in the database. The subitems were stored in the same table, but with a “parentid” field that, if on the top level says 0, otherwise it had the id of it’s direct parent. The output script in the end loops through based on id of item and id in parent id (it’s a simple system, any questions can be posted and I can go over it in more detail).

Snipplr: http://snipplr.com/view/50855/saving-nested-jquery-sortable-lists/

First, yes, those functions are nested inside each other (since nothing else is going to use the subitems function). Also, the output is just a long string, theres nothing saying it can’t be a array except I guess, but sending JSON to PHP to un JSON it to work on it is more steps then just sending the string and working on it. The string will start with a comma (unless you find a good use for it, the production code this was ripped fro, uses it for the entire menus ID) and it can easily be exploded on the comma to break down items, then on the / to get id/parentid (see what I did there). It all looks rather messy and disorganized but it works very well in the end.

The code snippet above has a bunch of implementation specific code in it (I just ripped it from the test production code) but since this sort of thing isn’t very beginner friendly I don’t see that as being a problem, if you do have question you can post them and I’ll try my best to help, it’s simpler than it may seem.