ドラッグ可能にする、解除する

Yahoo UI Libraryは指定したエレメント（タグ）をドラッグできるようにすることができます。ドラッグドロップの機能は最初のバージョンから変わっていませんが、一部のメソッドに関しては使用しないようになっています（ドラッグドロップマネージャーのページを参照）。
エレメントをドラッグできるようにするにはnew YAHOO.util.DD()を使います。最初のパラメータにドラッグ可能にしたいエレメントまたはエレメントのID名を指定します。
実際のサンプルは以下のようになります（サンプル01を実行する）。
【サンプル01】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript"><!--
YAHOO.util.Event.addListener(window, "load", function(){
new YAHOO.util.DD("contents1");
});
// --></script>
</head>
<body>
<h1>ドラッグ可能にします</h1>
<div id="contents1">ここがドラッグできます</div>
</body>
</html>

複数のエレメントをドラッグできるようにするにはnew YAHOO.util.DD()を列記します。エレメントのID名の命名規則が決まっていれば、それに合わせてfor()などを使って処理するのがよいでしょう。
実際のサンプルは以下のようになります。（サンプル02を実行する）

【サンプル02】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript"><!--
YAHOO.util.Event.addListener(window, "load", function(){
new YAHOO.util.DD("contents1");
new YAHOO.util.DD("contents2");
new YAHOO.util.DD("contents3");
});
// --></script>
</head>
<body>
<h1>ドラッグ可能にします</h1>
<div id="contents1">(1)ここがドラッグできます</div>
<div id="contents2">(2)ここがドラッグできます</div>
<div id="contents3">(3)ここがドラッグできます</div>
</body>
</html>

ドラッグする際に実際のエレメントがドラッグされるのではなく、元のエレメントはそのままで枠だけドラッグ時に移動／表示してほしい場合もあります。この場合にはnew YAHOO.util.DD()の代わりにnew YAHOO.util.DDProxy()を使います。パラメータはnew YAHOO.util.DD()と同じです。new YAHOO.util.DDProxy()を使うとドラッグ時にエレメントと同じサイズの枠が作成され、その枠だけがドラッグして移動できるようになります。
実際のサンプルは以下のようになります。（サンプル03を実行する）

【サンプル03】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript"><!--
YAHOO.util.Event.addListener(window, "load", function(){
new YAHOO.util.DDProxy("contents1");
new YAHOO.util.DDProxy("contents2");
new YAHOO.util.DD("contents3");
});
// --></script>
</head>
<body>
<h1>ドラッグ可能にします</h1>
<div id="contents1">(1)ここがドラッグできます</div>
<div id="contents2">(2)ここがドラッグできます</div>
<div id="contents3">(3)ここがドラッグできます(No Proxy)</div>
</body>
</html>

ドラッグ機能を解除してドラッグできないようにすることもできます（機能を解除するのではなく動かないようにロックすることもできます）。エレメントのドラッグ機能を解除するにはnew YAHOO.util.DD()によって作成されたドラッグオブジェクトを変数に入れておきます。解除する場合には、このドラッグオブジェクトのunreg()を呼び出します。これで、エレメントはドラッグできなくなります。
実際のサンプルは以下のようになります。（サンプル04を実行する）

【サンプル04】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript"><!--
var DDobj;
YAHOO.util.Event.addListener(window, "load", function(){
DDobj = new YAHOO.util.DD("contents1");
});
function unregDD(){
DDobj.unreg();
}
// --></script>
</head>
<body>
<h1>ドラッグ機能を解除します</h1>
<form>
<input type="button" value="ドラッグ機能を解除" onClick="unregDD()">
</form>
<div id="contents1">ここがドラッグできます</div>
</body>
</html>


[目次へ]