ドラッグで移動量を制限する

　yuiではページ上のオブジェクトをドラッグする際に１回の移動量を制限することができます。ドラッグドロップ同様、以下のyuiライブラリファイルが必要です。
　ドラッグオブジェクトの設定は「ドラッグする」と同様です。横方向の移動量の制限はsetXConstraint()の3番目のパラメータに1回の移動量をピクセル数で指定します。15なら15ピクセルずつ移動します。以下のサンプルは横方向のみ50ピクセル単位で移動します。縦方向は普通に移動します。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ドラッグする（横の移動量を制限）</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
dragObj = new YAHOO.util.DD("myBox");
dragObj.setXConstraint(0, 300, 50);
}
// --></script>
</head>
<body>
<h1>yuiでドラッグする（横の移動量を制限）</h1>
<div id="myBox">ここのボックスをドラッグすることができます。</div>
</body>
</html>

　横方向ではなく縦方向はsetYConstraint()で指定します。やはり3番目のパラメータに手多方向の移動量をピクセル数で指定します。
　以下のサンプルは縦方向のみ50ピクセル単位で移動します。横方向は普通に移動します。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ドラッグする（縦の移動量を制限）</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
dragObj = new YAHOO.util.DD("myBox");
dragObj.setYConstraint(0, 300, 50);
}
// --></script>
</head>
<body>
<h1>yuiでドラッグする（縦の移動量を制限）</h1>
<div id="myBox">ここのボックスをドラッグすることができます。</div>
</body>
</html>

　setXConstraint()とsetYConstraint()の両方を指定すれば、横縦の移動量を制限することができます。
　以下のサンプルは縦横の移動量を50ピクセルに制限するものです。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ドラッグする（移動量を制限）</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
dragObj = new YAHOO.util.DD("myBox");
dragObj.setXConstraint(0, 300, 50);
dragObj.setYConstraint(0, 300, 50);
}
// --></script>
</head>
<body>
<h1>yuiでドラッグする（移動量を制限）</h1>
<div id="myBox">ここのボックスをドラッグすることができます。</div>
</body>
</html>

[目次へ]

(2006.5.22)