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= 
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <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> 
    <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>