Skip to content
Related Articles

Related Articles Drag & Drop zindex Option

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Dec, 2020
View Discussion
Improve Article
Save Article

The library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone.

The zindex option is used to specify the CSS z-index of the element that is being dragged. The z-index is used to specify the order of the elements on the page. A higher value means that the element would be displayed above elements with a lower value.


{ zindex: value }

Parameters: This option has a single value as mentioned above and described below:

  • value: This is an integer value that specifies the z-index of the drag-gable element. The default value is 1000.

The below example illustrates the use of this option.



<!DOCTYPE html>
  <script type="text/javascript" 
  <script type="text/javascript" 
  <script type="text/javascript">
    window.onload = function () {
      // Draggable element with z-index set to 100
      new Draggable('elem1', { zindex: 100 });
      // Draggable element with z-index set to 200
      new Draggable('elem2', { zindex: 200 });
    <h1 style="color: green">
  <strong> Drag &
    Drop zindex Option
     Drag the elements to see the effect of 
     the zindex option. Element 2 has a 
     higher zindex than Element 1.
  <img id="elem1" src="elem1.png">
  <img id="elem2" src="elem2.png">


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!