拖放及按扣選項

說明

該選項用於使可拖動格按照網格捕捉或限制其移動範圍。

如果設定為 false（預設選項），則不會發生捕捉或限制。
如果為整數 x，則可拖動格將捕捉到 x 畫素的網格。
如果為陣列 [x, y]，則水平拖動會捕捉到 x 畫素的網格，而垂直拖動會捕捉到 y 畫素的網格。
它也可以是一個符合 Function( x , y , draggable ) 的函式，返回一個數組 [x, y]。

語法

以下是使用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>

這將產生以下結果−

scriptaculous_drag_drop.htm

列印頁面