使用 snap 选项进行拖放

描述

此选项用于使可拖动对象捕捉到网格或限制其移动。

• 如果设置为 false(默认)，则不会发生捕捉或限制。

• 如果 x 为整数，则可拖动对象将捕捉到 x 像素的网格。

• 如果数组 [x, y]，则水平拖动将捕捉到 x 像素的网格，垂直拖动将捕捉到 y 像素。

• 它也可以是一个符合 Function( x , y , draggable ) 的函数，返回一个数组 [x, y]。

语法

以下是使用 snap 的各种语法选项。

// 拖动时将目标对齐到 50 像素网格
new Draggable('element', {snap:50});

或

// 将拖动限制到 100x50px 框
new Draggable('element', {
   snap: function(x, y) {
      return[ (x < 100) ? (x > 0 ? x : 0 ) : 100, (y < 50) ? (y > 0 ? y : 0) : 50 ];
   }
});

OR

// 限制拖动到元素的父节点
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.html