拖放和 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

列印頁面