Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery UI Sortable items Option

Improve Article
Save Article
  • Last Updated : 20 Jan, 2022
Improve Article
Save Article

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.

HTML




<!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:

jQuery UI Sortable items Option

Reference: https://api.jqueryui.com/sortable/#option-items 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!