ドラッグ＆ドロップ
Dojoのドラッグ＆ドロップ機能を用いるときは、"dojo.dnd.*"をrequireする。
dojo.require("dojo.dnd.*");
利用するときは、ドラッグ＆ドロップするHTML要素を指定する。HTMLとしての記述は特にない。 ドラッグ対象となるオブジェクト(HTML要素)をHtmlDragSourceとして設定する。 ドラッグしたオブジェクトをドロップする場所を、HtmlDropTargetとして設定する。
ドロップできる場所では、水平の線が現れる。ドラッグしたオブジェクトを、ドロップ対象ではない場所でドロップしたら、ドラッグしたオブジェクトは元の場所に戻る。
HtmlDragSource/HtmlDropTargetの引数として、1つ目にドラッグ対象となるオブジェクト、2つ目にドラッグ/ドロップ対象の範囲を示すコードを指定する。HtmlDragSourceではコードを文字列として１つ、HtmlDropTargetではコードを配列で複数指定できる。
以下の例では、aaa, bbb, cccをドラッグして、ddd, eeeにドロップできる。
- aaa
- bbb
- ccc
- ccc-1
- ccc-2
- ddd
- eee
<html>
<head>
<title>Dojo Demos</title>
<script type='text/javascript' src='dojo.js'></script>
<script type='text/javascript'>
dojo.require('dojo.dnd.*');
function init() {
new dojo.dnd.HtmlDropTarget(dojo.byId('ddd'), ['dest']);
new dojo.dnd.HtmlDropTarget(dojo.byId('eee'), ['dest']);
new dojo.dnd.HtmlDragSource(dojo.byId('aaa'), 'dest');
new dojo.dnd.HtmlDragSource(dojo.byId('bbb'), 'dest');
new dojo.dnd.HtmlDragSource(dojo.byId('ccc'), 'dest');
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<ul>
<li id='aaa'>aaa</li>
<li id='bbb'>bbb</li>
<li id='ccc'>ccc
<ul>
<li>ccc-1</li>
<li>ccc-2</li>
</ul>
</li>
</ul>
<ul>
<li id='ddd'>ddd</li>
<li id='eee'>eee</li>
</ul>
</body>
</html>
HtmlDragMoveSourceを使うと、ドラッグ＆ドロップではなく、指定したHTML要素を自由に動かすことができる。 HtmlDragMoveSourceを使うときは、dojo.dnd.HtmlDragMoveをrequireする。コンストラクタの引数にはHTML要素のみを指定する。
以下のfffは自由に動かすことが出来る。
- fff
dojo.require('dojo.dnd.HtmlDragMove');
function init() {
new dojo.dnd.HtmlDragMoveSource(dojo.byId('fff'));
}
dojo.addOnLoad(init);
setDragHandleでドラッグできる場所を指定できる。disableSelectionでは、ドラッグできない場所を指定できる。
var drag = new dojo.dnd.HtmlDragSource(dojo.byId('outer1'));
drag.setDragHandle(dojo.byId('inner1'));
dojo.html.disableSelection(dojo.byId('inner1'));
イベント
ドラッグ＆ドロップのイベントを取得する方法として、既存のクラス(dojo.dnd.HtmlDropTargetなど)を継承したクラスを利用する方法と、dojo.event.connectを使う方法とがある。
ドロップ対象において発生するイベントには以下がある。
- onDrop(e) ドラッグ対象をドロップしたとき
- onDragOver(e) ドロップ対象の上に、ドラッグ対象が入ったとき
- onDragOut(e) ドロップ対象の上から、ドラッグ対象が出たとき
- onDragMove(e) ドラッグ対象の上で、ドラッグ対象を動かしたとき (うまく動きませんできた)
- onDropStart(e) ドラッグが始まったとき。ドロップ対象の検証をするときに使える
- onDropEnd(e) ドラッグが終わったとき
各イベントでは、引数としてdojo.dnd.DragEventオブジェクトを受け取る。DragEventオブジェクトは以下のプロパティを持つ。
- dragObjects: ドラッグしたオブジェクト
- dragSource: ドラッグ対象のオブジェクト。dragSource.dragObjectはdragObjectと同じ。ドロップ先の情報もパラメータとして持つ。
- target: ドロップ対象のオブジェクト。まだドロップしてなければnullが返る。
ドラッグ対象のイベントには以下がある。
- onSelected(e) ドラッグ対象がクリックされたとき
- onDragStart(e) ドラッグを始めたとき
- onDragEnd(e) ドラッグが終わったとき。ドロップ対象のイベントonDropの前に呼ばれる。
以下の例では、ドロップ対象の上にドラッグ対象が重なったら、ドロップ対象の色を赤色に変えるようにしている。
- ggg
- hhh
- iii
- iii-1
- iii-2
- jjj
- kkk
<html>
<head>
<title>Dojo Demos</title>
<script type="text/javascript">
var djConfig = { isDebug: true };
</script>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.*");
function init() {
dojo.declare("dojo.dnd.DestDropTarget",dojo.dnd.HtmlDropTarget,{
onDragOver: function(e) {
dojo.debug('dragOver');
this.domNode.style.color = "red";
return dojo.dnd.HtmlDropTarget.prototype.onDragOver.apply(this, arguments);
},
onDragOut: function(e) {
dojo.debug('dragOut');
this.domNode.style.color = "black";
return dojo.dnd.HtmlDropTarget.prototype.onDragOut.apply(this, arguments);
}
});
new dojo.dnd.DestDropTarget(dojo.byId("ddd"), ["dest"]);
new dojo.dnd.DestDropTarget(dojo.byId("eee"), ["dest"]);
new dojo.dnd.HtmlDragSource(dojo.byId("aaa"), "dest");
new dojo.dnd.HtmlDragSource(dojo.byId("bbb"), "dest");
new dojo.dnd.HtmlDragSource(dojo.byId("ccc"), "dest");
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<ul>
<li id="aaa">aaa</li>
<li id="bbb">bbb</li>
<li id="ccc">ccc
<ul>
<li>ccc-1</li>
<li>ccc-2</li>
</ul>
</li>
</ul>
<ul>
<li id="ddd">ddd</li>
<li id="eee">eee</li>
</ul>
</body>
</html>
以下の例では、xxx, yyy, zzzをドラッグして、入力フォームに値を設定できる。
- xxx
- yyy
- zzz
<html>
<head>
<title>Dojo Demos</title>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.*");
function init4() {
dojo.declare("dojo.dnd.DestDropTarget",dojo.dnd.HtmlDropTarget,{
onDragOver: function(e) {
dojo.byId('text').value = e.dragObjects[0].domNode.innerHTML;
}
});
new dojo.dnd.DestDropTarget(dojo.byId("text"), ["dest"]);
new dojo.dnd.HtmlDragSource(dojo.byId("xxx"), "dest");
new dojo.dnd.HtmlDragSource(dojo.byId("yyy"), "dest");
new dojo.dnd.HtmlDragSource(dojo.byId("zzz"), "dest");
}
dojo.addOnLoad(init4);
</script>
</head>
<body>
<ul>
<li id="xxx">xxx</li>
<li id="yyy">yyy</li>
<li id="zzz">zzz</li>
</ul>
<input id="text" type="text">
</body>
</html>
