2008
Sorting a Nested List Using jQuery And Saving the Changes
Downloads , JavaScript , jQuery , Web development Add comments
A reader asked me if it was possible to sort/rearrange items in nested lists (lists within a main list) using the jQuery UI Sortables code. I told him that it was, and I had actually created a tool for a client recently that made use of that feature.
He wanted to know more about how to do it, so I went ahead and created a downloadable working demo of how to do it.You can view an on-line version of the demo (and get the downloadable zip file) here:
The drag-and-drop action that lets you move the items around is the easiest part, as that's simply the Sortables code doing its work. Most of the work involved the code that generates the list for display (written in ColdFusion but do-able in other languages) and the JavaScript code that leverages the core jQuery selectors to scan the list and create a string of data that represents the structure and order of entire list. Both sets of code use a recursive function anytime a nested list is encountered, making it possible to have an unlimited number of nested lists within the main list or any other nested list.
The hierarchy structure is tracked/described through the use of parent ids. Each item in the list has a database record that includes the unique record id of its parent (with items in the main list having a parent id of 0). The JavaScript code records the id of the parent DOM element for each item as it scans the list, and that information becomes part of the string that is submitted via the form. The order of the items is simply the byproduct of the JavaScript code traversing down the list.
Like the tool I wrote for rearranging items in a single list, this is simply another means of letting users rearrange the display of records when the order of display can be arbitrary or a matter of preference rather than a strict alphanumeric sort.
Jan 28, 2008 at 8:22 AM Thanks a lot for posting this, Brian. I' m looking forward to digging into the code. Cheers!
Sep 10, 2008 at 10:05 PM Thanks a lot for posting this, Brian. I' m looking forward to digging into the code. Cheers!
Sep 23, 2008 at 8:13 AM hey i m testing
Sep 23, 2008 at 4:13 PM I'm real excited about your script but I've noticed that when dragging multiple list items a second 'ghost' li appears. This ghost follows around the selected content and once released everything seems fine but it doesn't look too pretty. It does this on every browser I've tested. Any idea what's causing this?
Sep 24, 2008 at 7:52 AM @bKozora: Not sure why it's doing that. There may simply be too many elements in play when moving a block of items.
I've actually stopped using the Sortables UI plugin for moving around nested lists: I have another blog post where I described a sorting system that temporarily creates clickable targets for moving items or blocks of items:
http://www.swartzfager.org/blog/index.cfm/2008/3/20/Problem-No-DragandDrop-On-The-iPhoneiPod-Touch--Solution--ClickToClick-Move
...I find the new method to be easier to use because I don't have to guess where I need to drop an item so it falls into a nested list or just outside it: the targets provide a visual cue for that.
Nov 6, 2008 at 4:37 PM This is killer stuff, Brian - the performance is way better in IE7 than the prototype/script.aculo.us based approach I had been using to rearrange a very deep nested list.
Building upon your example, I updated the JQuery ui version to 1.5.2 and I can now drag items between two nested lists using the connectWith argument. http://ui.jquery.com/repository/latest/demos/functional/#ui.sortable
Thanks.
Mar 11, 2009 at 4:22 PM Wow, thanks for posting this. I've been looking around for a while on how to do this.
Mar 20, 2009 at 5:49 AM I was in need of this type of example to integrate on one of the projects I am working on.
Thanks a lot.
Oct 3, 2011 at 10:51 PM Great post. There seems to be an issue with the download though. Thanks
Oct 4, 2011 at 8:01 AM @Calvert I re-uploaded the download file.
Just FYI: I wouldn't recommend using this technique to reorder nested lists anymore. Users find it hard to move items to exactly where they want them (per this post: http://www.thoughtdelimited.org/thoughts/post.cfm/some-updates-on-reordering-items-with-jquery).