powered by Slim Framework
enhanced by Nesbot.com

jQuery: Organizing data with the Sortable plugin

Published on Sep 22, 2011 by Jamie Munro

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, 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.

Assumptions



  • 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…)


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.


<!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>

<style>
#photos {
border: 1px solid #000;
padding: 1em;
width: 465px;
}

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

<body>
<div id="photos">
<img id="photo_1" src="myphoto.png" alt="" />
<img id="photo_2" src="myphoto.png" alt="" />
<img id="photo_3" src="myphoto.png" alt="" />
<img id="photo_4" src="myphoto.png" alt="" />
<img id="photo_5" src="myphoto.png" alt="" />
<img id="photo_6" src="myphoto.png" alt="" />
<img id="photo_7" src="myphoto.png" alt="" />
<img id="photo_8" src="myphoto.png" alt="" />
<img id="photo_9" src="myphoto.png" alt="" />
<img id="photo_10" src="myphoto.png" alt="" />
<img id="photo_11" src="myphoto.png" alt="" />
<img id="photo_12" src="myphoto.png" alt="" />
<img id="photo_13" src="myphoto.png" alt="" />
<div class="clear"></div>
</div>

<script>
$(document).ready(function() {
$("#photos").sortable({
items: 'img',
update: function(event, ui) {
var result = $('#photos').sortable('serialize');
$.get('update_photos?' + result);
}
});
});
</script>
</body>
</html>


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:


// 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


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.

  1. Loop through the photo array that is serialized and sent as a GET parameter

  2. 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;

Summary


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.

Tags: Javascript | jquery

<- CSS3: Attribute Selectors  Home CakePHP: Using the jQuery Sortable Plugin and Saving to the Database -> 
blog comments powered by Disqus