List Sort Control (with jQuery)
Several months ago, I created a tool that allowed a user to move items in a list up-and-down one position at a time and then record those order changes back to the database.
Recently, I started to learn how to use jQuery, just around the time that the jQuery folks released a set of UI tools. One of these tools is a "sortable" tool that lets you designate a collection of items that can be reordered by dragging and dropping each item. So I decided to revisit my list reordering tool and redo it using jQuery. You can see the result below: feel free to reorder the items and save your changes.
- Name the ABC News reporter who received a serious head wound in Iraq. (Current Events) View Answer
- Which state is bigger in geographical size, Texas or Alaska? (Geography) View Answer
- X * Y= 39. X + Y= 16, X - Y= -10. What is X and what is Y? (Math) View Answer
- Who are the two scientists credited with discovering DNA? (Science) View Answer
- Who wrote the famous pamphlet "Common Sense"? (History) View Answer
In a regular application, I'd use a hidden form field to hold the resorted ID values; I made it a text area here so you could see what was happening.
The resorted items are posted to a page that records the changes in the database when the Save Changes button is pushed. You COULD submit the changes via Ajax any time the sort event ended, but that would create a lot of server-side transactions if the user makes a lot of changes and the list was long.
It's definitely a quicker, more efficient, and visually-pleasing was of resorting items. The only drawback is that the jQuery code doesn't work reliably on the Safari web browser (version 2, anyway), but that may not be an issue for you, especially if you plan to use the tool in the administrative interface for your application, where you may be able to recommend/dictate what kind of browser the administrative users should use.
You can download a copy of the example from the link below. Because the technique involves only HTML, CSS, and JavaScript, you can use it with any web application language (not just ColdFusion).
