JQuery is a popular JavaScript library that is widely used for creating dynamic and interactive web pages. One of its useful features is the ability to create sortable lists, which can be rearranged by dragging and dropping items. However, when working with these lists, you may need to retrieve the order of the items for further processing. In this article, we will discuss how to retrieve the order position of a JQuery sortable list.
Firstly, let's understand what a sortable list is. It is a list of items that can be reordered by the user. You can create a sortable list using the JQuery UI Sortable plugin, which provides a set of options and methods to handle the sorting functionality.
To start with, you need to include the necessary JQuery and JQuery UI libraries in your HTML document. You can either download these libraries and include them locally or use the CDN links. Once you have included the libraries, you can create a simple unordered list in your HTML code, as shown below:
```
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
Next, you need to initialize the sortable list using the `sortable()` method on the `ul` element. This method takes in a set of options as parameters, but for now, we will only use the `update` event. This event is triggered when the sorting is complete, and it provides us with the updated order of the list items. Let's see how we can retrieve this order position in our JavaScript code.
```
$(document).ready(function() {
$("#sortable").sortable({
update: function(event, ui) {
var order = $(this).sortable("toArray");
console.log(order);
}
});
});
```
In the above code, we have used the `sortable()` method on the `ul` element with the `update` event. In the event handler, we have used the `sortable("toArray")` method to retrieve the order of the list items as an array. This array contains the IDs of the list items in the new order. To verify this, we have logged the order in the console.
Now, let's take a look at a complete example where we display the retrieved order position on the web page itself.
```
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}
</style>
</head>
<body>
<ul id="sortable">
<li id="1">Item 1</li>
<li id="2">Item 2</li>
<li id="3">Item 3</li>
</ul>
<p>The order of items is: <span id="order"></span></p>
<script>
$(document).ready(function() {
$("#sortable").sortable({
update: function(event, ui) {
var order = $(this).sortable("toArray");
$("#order").text(order);
}
});
});
</script>
</body>
</html>
```
In the above example, we have added a paragraph element with an empty `span` element inside it. In our JavaScript code, we have used the `text()` method to set the retrieved order as the text content of the `span` element. This way, we can display the order on the web page itself.
In conclusion, retrieving the order position of a JQuery sortable list is a simple task that can be achieved by using the `sortable()` method and the `update` event. With this knowledge, you can further enhance your sorting functionality and perform actions based on the new order of the list items. So go ahead and try it out in your projects!
