3回に分けてお送りしているdragdrop.
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です。
それではコードを見ていきましょう。