Copyright © tutorialspoint.com

Drag 'n' Drop with zindex Option

previous next


Advertisements

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.


previous next

Copyright © tutorialspoint.com