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
<!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:
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
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.
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.
Published on Mar 2, 2019
Tags: JavaScript
| jQuery Tutorial
