jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily.
In this article, we are going to learn the jQuery UI Sortable items Option. The items option set which item needs to be Sortable.
Syntax: We need to pass the elements which need to be Sortable of the child of the element. In the initialization below, we are making the children list items sortable as follows:
$("#sortable").sortable({
items: "> li"
});-
To get or set after initialization using the following syntax:
// Get the option var itemsOption = $("#sortable").sortable("option", "items"); -
To set after initialization using the following syntax:
// Set the option $("#sortable").sortable("option", "items", "> ul > li");
CDN Links: Use the following CDNs for your jQuery Mobile project.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css” />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
Example: In the following example, we have made the child list of the initial list to be sortable by using “>ul > li” to the items option.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div data-role="page" id="gfgpage">
<div data-role="header">
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<div data-role="main" class="ui-content">
<h3> jQuery UI Sortable items Option</h3>
<ul id="sortable">
<li>Data Structures</li>
<li>Algorithms</li>
<ul>
<li>Competitive Programming</li>
<li>Machine Learning</li>
</ul>
</ul>
</div>
</div>
<script>
$("#sortable").sortable({
placeholder: "ui-state-highlight",
items: "> ul > li"
});
</script>
</body>
</html>
|
Output:
Reference: https://api.jqueryui.com/sortable/#option-items