RailsのDraggable
Rails付属のdragdrop.js(scriptaculous)のDraggableを触ったメモ。他のGUI作成言語と比べても、ほとんど変わらない使い勝手でした。
Draggable
Sortableの使い勝手があまりよろしくなかったので、独自のUIコンポーネントが作りたくなりました。まずは、Draggable（ドラッグ可能なコンポーネント）から。
基本的な使い方は、
<div id="dragObjectId">
任意のHTML
</div>
<script type="text/javascript">
new Draggable('dragObjectId');
</script>
で、コンストラクタにプロパティを追加すると、いろいろ、動作を変えることができます。
dragdrop.jsの中を見てみると、とても分かりやすいコードです。jsファイルそのものがAPIリファレンスになっています。
一度読んでみると、結構すぐに作れそうな気になります。
Revert - 逆再生
ドラッグしたオブジェクトが、元の位置に戻るかどうか、を決めるプロパティです。
new Draggable('dragObjectId',{revert:true});
左がtrue、右がfalseです。
starteffect -イベント発生時の視覚効果
ドラッグを開始すると、デフォルトでは、Opacityを薄くしていますが、これはオーバーライドできます。例えば、
new Draggable('dragObjectId',
{ starteffect:
function(element){Effect.Shake(element); }
});
など。使いずらーいけどw
いわゆるイベントフック的なメソッドではないと思うので、使い方には気をつけましょう。
snap -座標の追跡
座標を追跡するには、snapを使います。必ず、[x,y]をreturnする必要があります。
new Draggable('dragObjectId',
{snap: function(x,y){ なにかの処理; return [x,y]; } } );
感想
これだけAPI化されているとは知りませんでした。使い勝手は、ほとんどJavaやVBのAPIと変わらない。もちろん機能は少ないけど、表現能力はHTMLが補足するわけだし、Effectなどと組み合わせると、このライブラリならではの面白い動きも簡単です。
コンストラクタにチャチャッとコールバックまで書き込めてしまうのは、スクリプトならではのお手軽さですねー。
Observerパターン的なイベントフックには、Draggablesというオブザーバが用意されています。これは次回触ってみようと思います。
