List Reorder Tool
This tool is a user interface that allows the user to reorder a list or table by moving items up and down using JavaScript and CSS. This tool can be used with any set of data that meets the following requirements:
- Each item has a unique identifier, like a unique ID number or primary key value.
- Each item has a integer value associated with it that determines where it appears in the list (like an order number)
Below is a working example of the tool. Use the up and down triangle icons to move an item up or down in the list. The moved item will be highlighted so you can see which item was moved.
This version of the tool uses AJAX to update the order on the server side--you can verify that the changes to the order of the items has been recorded by simply reloading the page. I have also developed a version of the tool that works without AJAX where the order changes are submitted via an HTML form submission and are then processed on the server side.
| Move | Question | Type | Answer |
|---|---|---|---|
|
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 |
The JavaScript functions used by this tool in IE 6 and higher, Firefox, Safari 2.0, and Netscape 7 and higher.
I have put together two different downloads for this tool. The first is a ColdFusion version of the tool that generates the list using CFC functions and updates the data using CFM pages. The second is an HTML version of the tool containing a static copy of the demonstration list above and provides the framework for performing the server-side update with some other language (PHP, Java, etc.). Both versions include the JavaScript functions that power the list with or without using AJAX. To get the files that make up this tool, click on the hyperlink below to download the .zip file. All of the files contain comments that will help you customize the tool to meet your own needs.
