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

説明

このオプションを使用して、ドラッグ可能オブジェクトをグリッドにスナップしたり、グリッドの動きを制限したりします。

false（デフォルト）に設定されている場合、スナップまたは制約は発生しません。
整数xの場合、ドラッグ可能はxピクセルのグリッドにスナップします。
配列[x、y]の場合、水平方向のドラッグはxピクセルのグリッドにスナップし、垂直方向のドラッグはyピクセルにスナップします。
また、配列[x、y]を返すFunction（x、y、draggable）に準拠する関数にすることもできます。

構文

_snap_オプションを使用するためのさまざまな構文を次に示します。

//Snap target to a 50-pixel grid while dragging
new Draggable('element', {snap:50});

OR

//Constrain dragging to a 100x50px box
new Draggable('element', {
   snap: function(x, y) {
      return[ (x < 100) ? (x > 0 ? x : 0 ) : 100, (y < 50) ? (y > 0 ? y : 0) : 50 ];
   }
});

OR

//Constrain dragging to element's parent node
new Draggable('element', {
   snap: function(x, y, draggable) {
      function constrain(n, lower, upper) {
         if (n > upper)
            return upper;
         else if (n < lower)
            return lower;
         else
            return n;
      }

      var element = draggable.element.getDimensions( );
      var parent = draggable.element.parentNode.getDimensions( );
      return [
         constrain(x, 0, parent.width - element.width),
         constrain(y, 0, parent.height - element.height)
      ];
   }
});

例

<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(
               'myimage', {
                  revert:true, snap: function(x, y) {
                     return[
                        (x < 100) ? (x > 0 ? x : 0 ) : 100,
                        (y < 50) ? (y > 0 ? y : 0) : 50
                     ];
                  }
               }
            );
         }
      </script>
   </head>

   <body>
      <p>Try to drag the following image out of its defined
         boundary and see the result. Later change its boundary and
         repeat the exercise.</p>
      <img id = "myimage" src = "/images/scriptaculous.gif"/>
   </body>
</html>

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

Script.aculo.us-scriptaculous-snap-example

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

説明

構文

例

目次