ドラッグする

　yuiではページ上のオブジェクトをドラッグすることができます。まず、以下のyuiライブラリファイルが必要です。
　これらのライブラリを読み込んだら次はHTMLタグの設定です。簡単な方法としてはドラッグしたいタグにid属性でID名を指定します。ID名を指定しておけば以下のようにしてドラッグの設定することができます。

new YAHOO.util.DD("ID名");

パラメータはID名だけでなく、グループ名も指定することができます。グループ名は2番目のパラメータに指定します。グループ名は省略することができます。以下のサンプルでは、ページ上のボックスをドラッグするものです。（サンプルを実行する）

<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");
}
// --></script>
</head>
<body>
<h1>yuiでドラッグする</h1>
<div id="myBox">ここのボックスをドラッグすることができます。</div>
</body>
</html>

　yuiではドラッグする範囲を制限することもできます。範囲の設定は横方向と縦方向を個別に設定することができます。まず、横方向の移動範囲を制限してみます。横方向の範囲を指定するにはsetXConstraint()を使います。これは以下の書式になります。

ドラッグオブジェクト.setXConstraint(左端, 右端)

　実際のサンプルは以下のようになります。これはドラッグの範囲を0ピクセルから300ピクセルまでに制限するものです。（サンプルを実行する）

<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);
}
// --></script>
</head>
<body>
<h1>yuiでドラッグする（横方向に範囲を制限）</h1>
<div id="myBox">ここのボックスをドラッグすることができます。</div>
</body>
</html>

　縦方向の範囲を指定するにはsetYConstraint()を使います。これは以下の書式になります。

ドラッグオブジェクト.setYConstraint(上端, 下端)

　実際のサンプルは以下のようになります。これはドラッグの範囲を0ピクセルから300ピクセルまでに制限するものです。（サンプルを実行する）

<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);
}
// --></script>
</head>
<body>
<h1>yuiでドラッグする（縦方向に範囲を制限）</h1>
<div id="myBox">ここのボックスをドラッグすることができます。</div>
</body>
</html>

　setXConstraint()とsetYConstraint()を同時に指定することで、横方向と縦方向の移動範囲を同時に制限することもできます。
　実際のサンプルは以下のようになります。これはドラッグの範囲を0ピクセルから300ピクセルまでに制限するものです。（サンプルを実行する）

<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);
dragObj.setYConstraint(0, 300);
}
// --></script>
</head>
<body>
<h1>yuiでドラッグする（縦横方向に範囲を制限）</h1>
<div id="myBox">ここのボックスをドラッグすることができます。</div>
</body>
</html>

[目次へ]

(2006.5.22)