script.aculo.us Drag & Drop zindex Option

Last Updated : 25 Dec, 2020

The script.aculo.us 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.

Syntax:

{ 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.

Example:

HTML

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" 
          src="prototype.js">
  </script>
  
  <script type="text/javascript" 
          src="scriptaculous.js">
  </script>
  
  <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 });
    };
  </script>
</head>
  
<body>
  <div>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
  </div>
  
  <strong>
    script.aculo.us Drag &
    Drop zindex Option
  </strong>
  
    
  <p>
     Drag the elements to see the effect of 
     the zindex option. Element 2 has a 
     higher zindex than Element 1.
  </p>
  
  <img id="elem1" src="elem1.png">
  <img id="elem2" src="elem2.png">
</body>
  
</html>

Output:

My Personal Notes

Related Articles

script.aculo.us Drag & Drop zindex Option

HTML