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>

これにより、次の結果が生成されます–

Script.aculo.us-scriptaculous-zindex-example

zindexオプションを使用したドラッグアンドドロップ

説明

構文

例

目次