ドラッグ＆ドロップ処理
サイトに動きを追加するのには、マウスの操作はかかせません。マウスのドラッグ＆ドロップ処理はモジュールが複数に分かれています。
どのようなモジュールがあるか見ていきましょう。
モジュールの一覧表
モジュールを一覧表で示します。
| モジュール | 概要 |
| dd-drag | ドラッグ処理をサポート |
| dd-drop | ドロップ処理をサポート |
| dd-proxy | ドラッグ時実態でなく、枠のみ等代理の物を使う処理をサポート |
| dd-constrain | ドラッグできる範囲の処理をサポート |
画像を表示してマウスで動かすことができる例題を考えてみましょう。モジュールdd-dragを使います。例題の実行画面を図2に示します。
リスト3を見てください。
<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で指定した画像をマウスで動かすことができるようになりました。
ドロップの場所を特定する例題
ドラッグがあれば、ドロップがあります。ドロップ場所を特定する例題を考えてみましょう。ドロップ場所を決めおいて、指定場所にドロップされたら、文字を出します。指定場所から外れたら、文字を消します。以下が起動時の画面です。
左上の画像を下にある四角の枠にドラッグしてドロップします。リスト4を見てください。
<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 | ドロップ枠上を通過 |
イベント処理を使うと面白いサイトができそうです。
