使用 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.html