NOTE: As of July 12, 2009, this blog has been discontinued and replaced by the new Thought Delimited blog. All of the entries in this blog can be found there, along with new posts.
UI Tool for Rearraging Items in a List
There are occasions, however, when administrative users want to be able to manually rearrange the order in which records or items will be displayed. For example, a news or PR site may want to change the order in which articles are displayed on the main page so that the most important or "hottest" items are at the top. Or a web-based testing site may want to rearrange the order of the questions on a test.
How do you grant such a request?
Well, for starters, you need to add a sorting or order field to the relevant records, something that the users can change the value of without affecting any of the "real" data in the record. That's fairly easy to do.
The hard part is figuring out how to let your users manipulate those order numbers, because it's not sufficient to simple let them change each order number one at a time: what if two records end up with the same order/sorting number (like 5, for example)? Which record comes first?
You need a way for the users to change the order of an item in relation to the items around it.
After having faced this situation several times, I developed a user-interface tool that allows a user to rearrange the items in a list quickly and easily using JavaScript: my List Reorder tool.
I'm making two versions of this tool available for download: a ColdFusion-powered version with ColdFusion code and functions for rendering the item/record list from the database, and an HTML version that developers can utilize with other server-side languages (PHP, Java, etc.).
You can read more about the tool and download it either by clicking on the List Reorder Tool link in my Downloads box on the right, or by clicking on the link below:
I didn't even think to look for any comments because no one had ever left a comment on the blog before.
I'm sure by now you've found some other solution, but if not, the tool should work now.
I should also mention that I recently developed a brand new list reordering tool using the jQuery JavaScript library to allow the user to rearrange the items by dragging them. It doesn't work very well in Safari, but if that's not an issue for you, I can make it available for download sooner rather than later.
This is very cool. I've been looking for something like this. Have you tried to do this with nested lists? The jQuery UI site has a demo using nested lists but I can't find any code examples. Maybe it's time I rolled up my sleeves and dove into it myself...
The jQuery UI sortable function will handle nested lists: just make the top-level UL element sortable and it'll let you drag items around in the nested list and drag items from the nested list into the upper list and vice-versa. The only issue with that is that if you move everything out of the nested list, you can no longer move items into that nested UL. To get around this, you can create a hidden LI element in the nested list that you set such that it cannot be moved/sorted, insuring that that list always has at least one LI in it.
As for saving the new list configuration when the user finishes sorting it, It's doable--I did it for an application I'm just now finishing up--but it's complicated, because now you're trying to keep track of hierarchy as well as order (unless your situation lets you say something like "after the 5th item, everything else goes into this nested list").
What I ended up doing in my case was to run a JavaScript function prior to submitting the change information to the server that walked through the structure of my nested lists and denoted the information about each element (including the parent element of each element) in a large delimited string that I could submit to the server and then parse in order to update the appropriate layout records.
I've just published a blog post with a link to a demo that lets you rearrange items in nested lists. I made the code downloadable too. Have fun! :)