Script.aculo.us-scriptaculous-snap-example
提供:Dev Guides
スナップオプションを使用したドラッグアンドドロップ
説明
このオプションを使用して、ドラッグ可能オブジェクトをグリッドにスナップしたり、グリッドの動きを制限したりします。
- 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>
これにより、次の結果が生成されます–