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.
A few notes before we get started with jquery-sortablejs: 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. 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: 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. UPDATE `photos` SET `order` = 4 WHERE `id` = 11; 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
Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article
that you just finished reading.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner
or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in
and improve your skillset with any of the tutorials below.
Getting started with jQuery Sortable Plugin
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>
// 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
Summarizing the jQuery Sortable Plugin
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.