script.aculo.us Drag & Drop zindex Option
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> |
chevron_right
filter_none
Output:
