- script.aculo.us Tutorial
- script.aculo.us - Home
- script.aculo.us - Overview
- script.aculo.us - Modules
- script.aculo.us - Visual Effects
- script.aculo.us - Drag & Drop
- script.aculo.us - Sorting Elements
- script.aculo.us - Create Sliders
- script.aculo.us - Auto Completion
- script.aculo.us - In-Place Editing
- script.aculo.us Resources
- script.aculo.us - Quick Guide
- script.aculo.us - Resources
- script.aculo.us - Discussion
Drag & Drop with zindex Option
Description
This option specifies the CSS z-index to be applied to the element during a drag operation. By default, the element's z-index is set to 1000 while dragging.
When you are moving elements around on a page, sooner or later, some of them are going to overlap. In order to make sure that the item being dragged is visible among overlapping items, its z-index CSS attribute is changed to 1000 during the drag. This will cause the item to appear "above" all other items on the page unless you've set the z-index of other items to values higher than 1000.
In all cases, the original z-index of the dragged element is restored after the drag operation completes.
Syntax
new Draggable('element', {zindex: integer_number});
Example
<html> <head> <title>Draggables Elements</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script> <script type = "text/javascript"> window.onload = function() { new Draggable('myimage1', { zindex:1002 }); new Draggable('myimage2', { zindex:1003 }); } </script> </head> <body> <p>Try overlapping both the images, WML logo will always be on top of scriptaculous because its zindex 1003 is more than scriptaculous zindex, which 1002.</p> <img id = "myimage1" src = "/images/scriptaculous.gif"/> <br /> <img id = "myimage2" src = "/images/wml_logo.gif"/> </body> </html>
This will produce following result −
scriptaculous_drag_drop.htm
Advertisements