jQuery UI Sortable zindex Option Last Updated : 20 Jan, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Reference: https://api.jqueryui.com/sortable/#option-zIndex Comment More infoAdvertise with us Next Article jQuery UI Sortable handle Option H harshsethi2000 Follow Improve Article Tags : Web Technologies JQuery jQuery-UI jQuery-UI-Sortable Similar Reads jQuery UI Sortable handle Option jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes 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 2 min read jQuery UI Sortable items Option 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 goi 2 min read jQuery UI Sortable helper Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Sortable helper Option is used to allow a helper element to be used for dragging display. Syntax: Initializing the sort 2 min read jQuery UI Sortable tolerance Option 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 app 2 min read jQuery UI Sortable grid Option jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes 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 2 min read jQuery UI Sortable axis Option jQuery UI Sortable Widget axis option is used to define the items that can be dragged only horizontally or vertically. Its possible values are - "x", "y". Syntax: $( ".selector" ).sortable({ axis: "x" }); Approach: First, add jQuery UI scripts needed for your project. <link rel="stylesheet" href= 1 min read Like