Yahoo! UI Library3（YUI3）の動きを受け持つモジュール

Yahoo! UI Library Ver.3 を使ってみよう（4）

ドラッグ＆ドロップ処理

　サイトに動きを追加するのには、マウスの操作はかかせません。マウスのドラッグ＆ドロップ処理はモジュールが複数に分かれています。

　どのようなモジュールがあるか見ていきましょう。

モジュールの一覧表

　モジュールを一覧表で示します。

ドラッグ＆ドロップ処理のモジュール一覧表

モジュール	概要
dd-drag	ドラッグ処理をサポート
dd-drop	ドロップ処理をサポート
dd-proxy	ドラッグ時実態でなく、枠のみ等代理の物を使う処理をサポート
dd-constrain	ドラッグできる範囲の処理をサポート

　画像を表示してマウスで動かすことができる例題を考えてみましょう。モジュールdd-dragを使います。例題の実行画面を図2に示します。

図2：ドラッグ処理例題起動時の画面

　リスト3を見てください。

［リスト3］ドラッグ処理の書き方（dd-drag.html）

<style>
    #demo {
		  background-image: url(./DDimg.jpg);
		  width:200px;
		  height:200px;
    }
</style>
<script type="text/javascript">
	YUI().use('dd-drag', function(Y) {	//（1）
	    var dd = new Y.DD.Drag({	//（2）
	        node: '#demo'
	    });
	});
</script>

</head>
<body>
画像をDrag＆Dropできます<br><br>
<div id='demo'></div><br>
</body>

　（1）でモジュールdd-dragを指定します。（2）はドラッグの指定です。nodeでドラッグしたい画像を指定しています。これで、divで指定した画像をマウスで動かすことができるようになりました。

ドロップの場所を特定する例題

　ドラッグがあれば、ドロップがあります。ドロップ場所を特定する例題を考えてみましょう。ドロップ場所を決めおいて、指定場所にドロップされたら、文字を出します。指定場所から外れたら、文字を消します。以下が起動時の画面です。

図3：ドロップ処理例題起動時の画面

　左上の画像を下にある四角の枠にドラッグしてドロップします。リスト4を見てください。

［リスト4］ドロップ処理の書き方（dd-drop.html）

<style>
    #canvas{
    	background-color:#8DD5E7;
    	width:500;
    	height:120;
    }
    #demo {
	border:1px solid black;
	width:80px;
	height:80px;
    }
</style>
<script type="text/javascript">
	YUI().use('dd-drop','dd-drag', function(Y) {
	    var drag = new Y.DD.Drag({	//（1）
	        node: '#demo'
	    });
	    drag.on('drag:start',function(e){	//（2）
	    	Y.one('#comm').set('innerHTML','ドラッグ中です');
	    });
	    drag.on('drag:end',function(e){	//（3）
	    	Y.one('#comm').set('innerHTML','　　　　　　　　　');
	    });

	    var drop = new Y.DD.Drop({	//（4）
	        node: '#canvas'
	    });
	    drop.on('drop:hit',function(e){	//（5）
	    	Y.one('#canvas').set('innerHTML','ドロップされました');
	    });
	    drop.on('drop:exit',function(e){	//（6）
	    	Y.one('#canvas').set('innerHTML','　　　　　　　　　');
	    });
	});
</script>

</head>
<body>
<div id='comm'>下の画像をドラッグしてください</div><br>
<div id='demo'><img src='./DDimg.jpg' width='80px' height='80px'></div><br><br>
<div id='canvas'></div>
</body>

　モジュールはdd-dropとdd-dragを指定しています。（1）の指定でドラッグを可能にしています。ドラッグが始まると（2）の「drag:start」イベントで、'ドラッグ中です'を表示して、（3）「drag:end」のドラッグ終了イベントで表示文字を消しています。

　（4）では、ドロップされる場所のオブジェクトdropを指定しています。（5）の「drop:hit」イベントでドロップされたとき、'ドロップされました'を表示し、（6）の「drop:exit」のイベントで表示文字を消しています。

ドラッグ＆ドロップ用イベント

　例題のようにドラッグやドロップされたかを確認するためにはイベント処理を使用します。イベントは他に以下のものがあります。

ドラッグ＆ドロップ用イベント

イベント	概要
drag:mouseDown	ドラッグのためのマウスダウン
drag:drag	ドラッグ中
drop:enter	ドロップ枠に入った
drop:over	ドロップ枠上を通過

　イベント処理を使うと面白いサイトができそうです。