Copyright ©

Drag 'n' Drop with zindex Option

previous next



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});


<title>Draggables Elements</title>
<script type="text/javascript" 
<script type="text/javascript"

<script type="text/javascript">

window.onload = function() {
     new Draggable('myimage1', { zindex:1002 });
     new Draggable('myimage2', { zindex:1003 });


<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"/>

To understand it in better way you can Try it yourself.

previous next

Copyright ©