script.aculo.usを読み解く

第12回 dragdrop.js (中編)

この記事を読むのに必要な時間:およそ 12 分

3回に分けてお送りしているdragdrop.jsの解説の、第2回目です。次回でこの連載も最終回となります。

Draggable

ドラッグ可能要素のクラスです。機能としては,ドラッグ操作にエフェクトをかける,ドラッグにあわせて画面をスクロールする,ドラッグ位置をスナップするなどがあります。ここでクラスに登場するプロパティの意味を解説します。

element
ドラッグ可能になる要素です。
handle
ドラッグの把手になる要素です。デフォルトではelementの要素と同一です。ドラッグ開始のためのmousedownイベントハンドラはこの要素を監視します。
dragging
現在ドラッグ中かどうかのフラグです。
delta
ドラッグの出発地点です。[x,y]の配列です。
offset
ドラッグを開始したときの,マウスポインタの位置と要素の位置のズレの量です。
_clone
options.ghostingが有効のときに出発地点に表示される,要素のクローンです。
_isScrollChild
element要素が,options.scroll要素の子要素かどうかです。
originalScrollLeft,originalScrollTop
ドラッグを開始したときのoptions.scroll要素のスクロール位置です。
options.handle
ドラッグの把手になる要素を指定します。指定方法は,DOM idか,element要素の子要素が含むクラス名です。デフォルトはドラッグ可能要素と同一です。
options.starteffect
ドラッグを開始したときのフックです。デフォルトではEffect.Opacityで要素をフェードアウトします。
options.change
ドラッグ中に位置が変化するたびに呼ぶフックです。
options.reverteffect
ドラッグをキャンセルしたとき,または,ドロップが失敗したときのフックです。デフォルトではEffect.Moveで要素が元の位置に戻る様子をアニメーションで表現します。
options.endeffect
ドラッグを終了したときのフックです。デフォルトではEffect.Opacityで要素をフェードインします。
options.onDropped
ドロップした直後に呼ぶフックです。
options.zindex
ドラッグ中の要素のCSSのzindexプロパティの値を指定します。デフォルトは1000です。
options.revert
ドラッグを終了したときのフックを呼ぶかどうかです。デフォルトではfalseです。真偽値を与えるほかに,関数を与えることもできます。この関数は,ドラッグの終了時に,ドラッグした要素を引数に呼ばれるので,そこで真偽値を返すようにします。
options.quiet
ドラッグ中に,ドロップ先の変化の表示を一切しないオプションです。デフォルトではfalseです。
options.scroll
ドラッグにあわせてスクロールする要素を指定します。デフォルトはwindowで,ブラウザのスクロールが動きます。
options.scrollSensitivity
マウスポインタと,options.scroll要素の短形領域の枠がこの値以下に近づくと,スクロールを始めます。デフォルトは20pxです。大きければ大きいほどスクロールが始まりやすくなります。
options.scrollSpeed
スクロールの速度です。デフォルトは15px毎秒です。
options.snap
スナップするかどうか,するならばその幅を指定します。デフォルトではfalseです。3つの指定方法があります。配列[x,y]か,数値aか(配列[a,a]を与えるのと同じです),関数(引数にx座標,y座標をとり、配列[x,y]を返すようにします)です。
options.delay
Draggablesのactivate関数で,処理を指定ミリ秒間遅延するためのオプションです。デフォルトは0です。
options.ghosting
ドラッグ中に元の場所に要素のクローンを表示するかどうかです。デフォルトはfalseです。

それではコードを見ていきましょう。

著者プロフィール

源馬照明(げんまてるあき)

名古屋大学大学院多元数理科学研究科1年。学部生のときにSchemeの素晴らしさを知ったのをきっかけに,関数型言語の世界へ。JavaScriptに,ブラウザからすぐに試せる関数型言語としての魅力と将来性を感じている。

ブログ:Gemmaの日記

コメント

コメントの記入