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: