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>
Output:
Reference: https://api.jqueryui.com/sortable/#option-zIndex
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