Here’s a tried and tested method i use to build this functionality. It will work with or without js. In this example we will order the traditional post records.

1. The Database

Create a table to hold your posts and include a column (int) called order.

2. Adding a new record

Each time a new post is saved, the order column is assigned the auto inc value of the rows id. This prevents records from ever having the same order value.

3. The order view (HTML)

To provide the user with a way to order posts records, i’ll start with the HTML. This process is designed to degrade gracefully when JS is disabled. Dont worry if this process seems a bit clunky to the user, chances are they’ll have js turned on. I have found by restricting yourself to develop for HTML first created better structured and semantic code. Quite often divining straight in there with the javascript will get the job done, but it’ll be a headache to maintain.

We’ll present the records in a ordered list, cause we roll semantically like that. Each li represents a post in the database They are ordered by their current order value.

form
	ol
		li
			select

Inside each li element is a select dropdown form input to hold each records order value. The possible options of the selectbox should be limited to the order values in the current record subset.

Again, this is prevents records having the same order value. Name the select box something like order[record->id]. So the post array will contain an array of record id => order value.

Stick a submit button at the bottom of that form and we’re all set…

4. The MySql/Post Process

A user changes some order values and then submits the form. First thing we need to do is check for duplicate order values. Some bright spark could have set all the select boxes to the same value! A quick way to do this is to use the php array_unique function.
This will return all unique values in the order array, so if all values in the array are unique, we’re golden.

$unique = array_unique($_POST['order']);
// if arrays are equal no dupicates posted
if($unique == $order_values)

If the user has posted duplicate order values you can provide feedback and get em to try again. After we have added a lick of jquery however, hopefully this will rarely happen!.

Once unique order values have been validated, its just a simple case of updating the order values of each post row by the post array key with the posted order value. Code will vary depending on what frameworks your using. Below is an example of what my Codeigniter Code would look like

foreach($this->input->post('order') as $id => $order)
{
	$post = new Post($id);
	$post->order = $order;
	$post->save();
}

Simples.

The Javascript

We have a basic, fugly but solid solution working. Now the fun part. With a few lines of jquery we can turn this into a fancy, elegant AND solid solution! We will use the jqueryui sortable plugin so the user can drag and re-order the list items. There is no need to show the selectboxes now because we have visual feedback on the current order. We’ll hide the selectboxes and then update their value whenever the list is reordered.

Here’s the code, the ol has an id of record-order.

// updates the order value of all items hidden
// selectbox to the current order after a drag has taken place
$("#record-order").sortable({
	update: function(event, ui){
		var options = new Array();

		// get an array of order option values
		$(this).find('li:first select option').each(
			function(i){
				options[i] = $(this).val();
			}
		);

		$(this).children('li').each(
			function(i){
				var v = $(this).find('select').val(options[i])
			}
		);
	}
});

Here’s a quick HTML template to organise your CSS typography.

Nothing fancy, just an HTML file containing the most common elements to start your CSS, and a basic typography stylesheet. I used the 960 grid system to reset browser CSS and control the template layout.

I find this helpful as a starting point for any site. Before I start knocking a CSS class together to style an element up for a specific page, I refer to the sites CSS template to see if  a similar base element already defined.

I would encourage keeping this typography stylesheet as basic as possible. Then use general css classes to add extra style later on.

Both the HTML and CSS files are included in the zip after the jump.

Download CSS Typography Template