Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery UI Sortable zindex Option

  • Last Updated : 20 Jan, 2022

jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery JavaScript library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily.

In this article, we will be using the jQuery UI Sortable zIndex option to define the z-index for element/helper while being sorted.

Syntax:

$( ".selector" ).sortable({zIndex: 9999});
  • To set the zIndex option:

    $( ".selector" ).sortable( "option", "zIndex", 9999 );
  • To get the zIndex option:

    var zIndex = $( ".selector" ).sortable( "option", "zIndex" );

Note: The default value of the Z-index option is 1000.

CDN Link: First, add jQuery Mobile scripts needed for your project.

<script src= “https://code.jquery.com/jquery-1.12.4.js”></script>
<script src= “https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>

Example: The below program will illustrate the use of the z-index option, In the below program we will set the z-index option to 9999, and the start event will trigger and show the current z-index option.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
    <style>
        #sortableList {
            list-style-type: none;
        }
  
        .geeks {
            margin: 10px;
            background: lightgreen;
            padding: 10px;
            border: 1px solid green;
            font-size: 25px;
        }
    </style>
    <script>
        $(function () {
            $('#sortableList').sortable({
                start: function (event, ui) {
                    $("#sortedList").html($("#sortedList").html() +
                        "Start event triggered when zIndex is " +
                        $("#sortableList").sortable(
                            "option", "zIndex") +
                        "<br>");
                },
                zIndex: 9999
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h4>jQuery UI Sortable zIndex option</h4>
  
        <ul id="sortableList">
            <li id="Tutorials" class="geeks">
                1.Free Tutorials
            </li>
            <li id="Articles" class="geeks">
                2.Millions of articles
            </li>
            <li id="Webinars" class="geeks">
                3.Webinars by Industry Experts
            </li>
            <li id="Courses" class="geeks">
                4.Live, Online and Classroom Courses
            </li>
        </ul>
  
        <h2><span id='sortedList'></span></h2>
    </center>
</body>

Output:

jQuery UI Sortable zindex Option

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!