Updated March 31, 2023
Introduction to jQuery Sortable
The following article provides an outline on jQuery Sortable. jQueryUI sortable()method is an Interaction method provided by jQueryUI for the purpose of reordering the elements in a list or a grid horizontally or vertically using the mouse. The sortable plugin is a flexible sorting plugin provided by jQueryUI to rearrange the elements into a proper and meaningful order to make the analysis and working on it more effective. The sorting action of this method is based upon an operation string passed as the first parameter to it. This plugin also allows sorting by dragging and dropping the elements in order to place the new element within the list and making other elements to adjust to fit.
We can use the sortable() method in two forms:
$(selector, context).sortable (options)$(selector, context).sortable ("actions", [params])Syntax:
1. The sortable(options) method specifies that an HTML element contains interchangeable options.
$(selector,context).sortable(options)Where, options parameter refers to an object that specifies the behavior of the elements involved in rearranging.
Some of the options which can be used with this method are as follows:
- appendTo, axis, cancel, connectWith, containment, cursor, cursorAt, delay, disabled, distance, dropOnEmpty, forceHelperSize, forcePlaceholderSize, grid, handle, helper, items, opacity, placeholder, revert, scroll, scrollSensitivity, scrollSpeed, tolerance and zIndex.
2. The sortable ( action, params) method can be used to perform an action on the sortable elements so as to prevent displacement.
$(selector,context).sortable("action", [params])Where, action here, is used as a string in the first argument of the method. One or more params can be added based on the action.
Some of the actions which can be used with this method are as follows:
- cancel(), destroy(), disable(), enable(), option(optionName), option(), option(optionName, value), option(options), refresh(), toArray(options), serialize(options), refreshPositions() and widget().
Examples of jQuery Sortable
Given below are the examples of jQuery Sortable:
Example #1
Following example illustrates how the sortable functionality works without passing any parameter to the sortable() method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI Sortable</title>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sort {
list-style-type: none;
margin: 0;
padding: 0;
width: 75%;
}
#sort li {
margin: 0 3px 3px 3px;
margin-left: 50px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 17px;
height: 16px;
}
#divstyle {
text-align: center;
background-color: cadetblue;
width: 300px;
height: 350px;
margin-left: 100px;
}
.default {
background: #cedc98;
border: 1px solid #dddddd;
color: #333333;
}
</style>
<script>
$(function() {
$("#sort").sortable();
});
</script>
</head>
<body>
<div id="divstyle">
<h1>Languages available</h1>
<hr />
<ul id="sort">
<li class="default">Mathematics</li>
<li class="default">English</li>
<li class="default">Chemistry</li>
<li class="default">Physics</li>
<li class="default">History</li>
<li class="default">Geography</li>
<li class="default">Computer Science</li>
</ul>
</div>
</body>
lt;/html>Output:
- Below screenshot is of the output which gets displayed on the page once the above code is executed.
- Now, we can start sorting the list by rearranging them.
- We can simply drag an element from its position using the mouse and drop it some other spot in the list as shown below in the screenshot.
- We can keep on playing with the elements by dragging and dropping them to rearrange them.
Example #2
Following example illustrates the usage of the placeholder option in the sortable() method of jQueryUI.
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI Sortable</title>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sort {
list-style-type: none;
margin: 0;
padding: 0;
width: 75%;
}
#sort li {
margin: 0 3px 3px 3px;
margin-left: 50px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 17px;
height: 16px;
}
.highlight {
border: 1px solid red;
background-color: yellow;
}
#divstyle {
text-align: center;
background-color: cadetblue;
width: 300px;
height: 350px;
margin-left: 100px;
}
.default {
background: #cedc98;
border: 1px solid #dddddd;
color: #333333;
}
</style>
<script>
$(function() {
$("#sort").sortable({
placeholder: "highlight"
});
});
</script>
</head>
<body>
<div id="divstyle">
<h1>Languages available</h1>
<hr />
<ul id="sort">
<li class="default">Mathematics</li>
<li class="default">English</li>
<li class="default">Chemistry</li>
<li class="default">Physics</li>
<li class="default">History</li>
<li class="default">Geography</li>
<li class="default">Computer Science</li>
</ul>
</div>
</body>
</html>Output:
- Once we start dragging the elements, the placeholder will start showing up on the available space.
- Here we have used the highlight class to show the placeholder in the list.
Example #3
Following example the usage of toArray(options) method as action with jQueryUI sortable() method.
Code:
<!DOCTYPE html>
<head>
<title>jQuery Sortable</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sort {
list-style-type: none;
margin: 0;
padding: 0;
width: 75%;
}
#sort li {
margin: 0 3px 3px 3px;
margin-left: 50px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 17px;
height: 16px;
}
#divstyle {
text-align: center;
background-color: cadetblue;
width: 300px;
height: 350px;
margin-left: 100px;
}
.default {
background: #cedc98;
border: 1px solid #dddddd;
color: #333333;
}
</style>
<script>
$(function() {
$('#sort').sortable({
update: function(event, ui) {
var productOrder = $(this).sortable('toArray').toString();
$("#sort_1").text (productOrder);
}
});
});
</script>
</head>
<body>
<div id="divstyle">
<h1>Languages available</h1>
<hr />
<ul id="sort">
<li id="1" class="default">Mathematics</li>
<li id="2" class="default">English</li>
<li id="3" class="default">Chemistry</li>
<li id="4" class="default">Physics</li>
<li id="5" class="default">History</li>
<li id="6" class="default">Geography</li>
<li id="7" class="default">Computer Science</li>
</ul>
<br>
<h3><span id="sort_1"></span></h3>
</div>
</body>
</html>Output:
- Below screenshot is of the output which gets displayed on the page once the above code is executed.
- Once we start sorting the elements , the order of items start displaying at the bottom as shown below in the screenshot.
- The order keeps on changing as we keep on dragging and dropping the elements in the list.
Conclusion
In this article, we learnt about jQueryUI sortable() method which is one of the Interaction methods provided by jQuery for interacting with DOM elements. This method basically rearranges the elements in a list or grid using the mouse. It allows DOM elements to be dragged and sorted. Elements are clicked on and dragged to a new place within the list allowing other elemnts in the list to adjust to fit in. Sortable elements, by default, have the draggable properties.
Recommended Articles
This is a guide to jQuery Sortable. Here we discuss the introduction and examples of jQuery Sortable. You may also have a look at the following articles to learn more –
