横方向の移動量を制限する

書式

dragObj.setXConstraint(left, right, step)

dragObj : ドラッグオブジェクト
left : 左端座標
right : 右端座標
step : 1回の移動量

説明

 横方向の移動量を制限するにはsetXConstraint()を使います。最初と2番目のパラメータには端の座標を指定します。これにより指定された端より外には移動しなくなります。3番目のパラメータには1回のドラッグで移動できるピクセル数を指定します。

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
ddBox = new YAHOO.util.DD("box");
ddBox.setXConstraint(0, 400, 10);
ddBox.setYConstraint(0, 200, 20);
}
// --></script>
</head>
<body>
<h1>制限付きでドラッグする</h1>
<div id="box">ここをドラッグできます</div>
</body>
</html>