使用 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
