Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
Drag 'n' Drop with zindex Option
Description:
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.
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>
|
To understand it in better way you can Try it yourself.
|
|
|