Organizing data with the jQuery Sortable plugin

Have you ever written some code that lets a user change the display order of something – articles, photos, widgets, etc…? You know the one, either you have the up and down arrows or go old school and let them enter a numerical value. By implementing the jQuery UI Sortable plugin aka sortablejs jquery, you will never have to write such a poor system again!

The jQuery UI Sortable allows for many different types of data to be sorted. It can be a list of items (horizontal or vertical), a table, a bunch of pictures – the sky truly is the limit. In this example, I will explore creating a photo gallery that allows the user to sort the display order of the photos. If you wish to see some demos, check out the jQuery Sortable plugin demos on their website.

Getting started with jQuery Sortable Plugin

A few notes before we get started with jquery-sortablejs:

A database will be required to store the photos and albums
Server-side technology will be required to save the end result in the database (PHP, ASP.NET, etc…)
In an upcoming post I’ll show how to accomplish this with CakePHP, but for now I want to stay focused on the sortable plugin

To accomplish this, you will need a database table of photos that will be displayed on the page. Presumably associated to a user – however, that’s not really important for this example.

Below is the full HTML source code required to complete this example. To start, the two jQuery libraries must be included: core and UI. Then, some basic CSS to create a gallery of thumbnail images that are floated left so they will automatically wrap to the next line.

Finally, the Javascript to convert them to sortable objects is included. An AJAX call has been implemented in the update event that is triggered once the user drops the image into a new position.

jQuery Sortable Plugin Implementation

[code]
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js”></script>

#photos img {
border: 1px solid #000;
float: left;
margin: 0.5em;
height: 50px;
width: 50px;
}
.clear {clear: both;}
</style>
</head>

If I was using server-side code, the output of images would be inside of a for loop instead of a hard-coded list.

There are a few more important things to point out. Firstly, if you look at the image tags closely they all have an id associated with them starting with photo_. Secondly, there is a numeric value after the photo_. This numeric value should correspond with the id in your database table. This will then be leveraged in the final part where an AJAX call is performed passing in the Javascript variable called result that contains a serialized list of the sortable elements:

[code]
// Initial serialized results:
photo[]=1&photo[]=2&photo[]=3&photo[]=4&photo[]=5&photo[]=6&photo[]=7&photo[]=8&photo[]=9&photo[]=10&photo[]=11&photo[]=12&photo[]=13

// Serialized results after sorting:
photo[]=1&photo[]=2&photo[]=3&photo[]=11&photo[]=4&photo[]=5&photo[]=6&photo[]=7&photo[]=8&photo[]=9&photo[]=10&photo[]=12&photo[]=13
[/code]

In the above listing, I dragged the photo with the number 11 in the id to the fourth position.

Now the final piece to complete this example is to save it server-side. Since this example is language independent, I will provide some pseudo-code of what this would look like.

Loop through the photo JavaScript array that is serialized and sent as a GET parameter
Update the photos table and set the order field to the current spot in the loop where the id is equal to value in the current array position:
UPDATE `photos` SET `order` = 4 WHERE `id` = 11;

Summarizing the jQuery Sortable Plugin

With less than 10 lines of Javascript code in combination with the jQuery UI Sortable plugin, you can turn your existing listing of data or photos into a sortable list and easily save it to the database to remember the previous sort order.