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>