script.aculo.usでドラッグ＆ドロップ
DraggableとDroppableの使い方
まずドラッグは、Draggableで実現している。まず、ドラッグ可能にしたい要素にid属性を与えてやる。
<div class="post_item" id="ans1" style="border:solid black 1px;width:90%;background-color:#FFFFFF;margin:5px;">織田信長</div>
で、そのidを指定してDraggableオブジェクトを作成する。
new Draggable("ans1", {revert:true});
第1引数がドラッグ可能にしたい要素のid属性。第2引数は動き方のオプションで、{revert:true}は「マウスを放したら元の位置に戻る」の意味。
次にドロップは、Droppableで実現している。ドラッグ時と同じように、ドロップ可能にしたい要素にid属性を与えてやる。さらに、ドラッグしたい要素にclass属性を与えてやる。さっきのコードの「 class="post_item"」部分のことだ。このクラスを持つ要素だけに、ドロップ可能領域が反応するようになる。
で、Droppablesオブジェクトにドロップ時の動きを登録。
Droppables.add( "answer",{
accept : "post_item",
onDrop : function(dragElement, dropElement, event){
$("name").value = dragElement.innerHTML;
if ($("name").value == "織田信長") {
$("result").innerHTML = "正解！";
} else {
$("result").innerHTML = "間違い！";
}
}
});
accept : "post_item",
onDrop : function(dragElement, dropElement, event){
$("name").value = dragElement.innerHTML;
if ($("name").value == "織田信長") {
$("result").innerHTML = "正解！";
} else {
$("result").innerHTML = "間違い！";
}
}
});
第1引数にドロップ可能要素のid属性。第2引数はドロップ時の反応を示すオブジェクト。内容はこんな感じ。
- accept
- ドラッグする側の
class属性。 - onDrop
- ドロップされた際に実行する関数。
他にもあるかもしれないが、この2つで充分動くのでよし。
これで「idが○○の要素にクラスがacceptの要素をドラッグアンドドロップしたらonDrop」となる。
カテゴリ：JavaScript
The trouble was that they were going up against a regular army that could exercise overwhelming force. ,
コメント by Red40 — 2009年10月23日 金曜日 @ 2:24:33