拖放和 zindex 选项

说明

此选项指定了在拖拽操作期间应用于元素的 CSS z-index。默认情况下，元素的 z-index 在拖拽时设置为 1000。

在页面上移动元素时，迟早会发生一些重叠。为了确保正在拖拽的项目在重叠的项目中可见，它的 z-index CSS 属性在拖拽期间更改为 1000。这会导致项目在页面上所有其他项目“上方”显示，除非你将其他项目的 z-index 设置为高于 1000 的值。

在所有情况下，在拖拽操作完成后，拖拽元素的原始 z-index 将被还原。

语法

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

这将产生以下结果 -

scriptaculous_drag_drop.htm

打印页面