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

Print Page