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です。
それではコードを見ていきましょう。