Copyright © tutorialspoint.com
This option is used 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.
new Draggable('element', {zindex: integer_number}); |
<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> |
To understand it in better way you can Try it yourself.
Copyright © tutorialspoint.com