[jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】
こんにちは! いわだて (@dutchisover) です！ ドラッグ＆ドロップに夢中の いわだて (@dutchisover) です！今回はdraggableを実装してからの【オプション】についてです。
メソッドはけっこうな数が用意されていて、ドラッグ&ドロップに関してはなんでもできちゃいそうです。のでまとめました。
ドラッグ&ドロップってどうやって実装するの？という場合は コチラ の記事で詳しく書きました！よければどうぞ！
また今回は使用用途ごとにジャンル分けしてまとめました。上記の目次からジャンルを確認できます。
この記事はJQuery UI – SakuraSaku jQuery Libraryさんのサイトを超参考にさせていただきました。
指定要素にドラッグ&ドロップさせる系
ドロップ先を限定する場合に使うメソッドです。
紐付けしたあとに他のメソッドと組み合わせてなにかするようなものが多いです。
| connectToSortable | id名 , class名 , 要素名 （初期値はfalse） |
|---|---|
| scope | グループ名（droppableに同じグループ名を付けて使う 初期値はdefault） |
| containment | id名 , class名 , 要素名 （初期値はfalse） |
connectToSortable
ドラッグ要素を特定のドロップ要素にだけしかドラッグできなくさせます。
左のボックスはconnectToSortableでドロップ要素のclass名を指定していますのでドラッグに制限があります。
右のボックスはどこにでもドラッグできます。
: “.drop-area”
: false
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// ドラッグできるボックスは .drag（順にa~z） // ドロップできるドロップ要素は .drop（順にa~z） jQuery(".drag-a").draggable({ connectToSortable: ".drop" }); jQuery(".drag-b").draggable({ connectToSortable: false }); jQuery(".drop").sortable({ }); |
scope
左のドロップ要素は指定なし、右の要素はscopeでグループ名を指定してます。
ボックスをドラッグすると、scope名の指定されているドロップ要素だけ黒くなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ドラッグできるボックスは .drag（順にa~z） // ドロップできるドロップ要素は .drop（順にa~z） jQuery(".drag").draggable({ scope: "groupA" }); jQuery(".drop-a").droppable({ scope: "groupA" }); jQuery(".drop-b").droppable({ activeClass: "grap", scope: "groupA" }); // わかりやすくするために activeClass でドラッグ中にドロップ要素に色が付くようにしています。 |
containment
左のボックスはcontainmentに parent が指定されており、親要素にあたる枠線から外にはドラッグできません。（親要素にpaddingが指定されているため padding分も越えることはできません）
|
1 2 3 4 5 6 7 8 |
// ドラッグできるボックスは .drag（順にa~z） jQuery(".drag-a").draggable({ containment: "parent" }); jQuery(".drag-b").draggable({ containment: false }); |
指定要素にドラッグ&ドロップさせるときのオプション
ここでは先ほど紐付けした要素に絡めて使うオプションです。単体での使い方はあまりわかっていません(笑)すいません。
| helper | clone , original （初期値はoriginal） |
|---|---|
| revert | invalid , valid , true , false（初期値はfalse） |
| revertDuration | 数値（ミリ秒 初期値は500） |
helper
helper: “clone”を指定すると、ドラッグ時に元の要素を残したまま、コピーをドラッグします。
helper: “original”はそのままドラッグした要素が移動します。
また、紐付けしたドロップ要素があればクローンをいくらでもドラッグ&ドロップできます。ここではconnectToSortableでドロップ要素と紐付けをしています。
|
1 2 3 4 5 6 7 8 9 10 11 |
// ドラッグできるボックスは .drag（順にa~z） // ドロップできるドロップ要素は .drop（順にa~z） jQuery(".drag-a").draggable({ helper: "clone", connectToSortable: ".drop" }); jQuery(".drag-b").draggable({ helper: "original" }); jQuery(".drop").sortable(); |
revert
revert: “valid”ならエリア内で、revert: “invalid”ならエリア外のときにドラッグ前の位置に戻ります。
また、revert: trueはエリア内でもどこでも戻ってきます。revert: falseはどこでも戻りません（初期値の状態）
ここではscopeでドロップ要素と紐付けをしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// ドラッグできるボックスは .drag（順にa~z） // ドロップできるドロップ要素は .drop // グループ名は groupB とします jQuery(".drag-a").draggable({ revert: "valid", scope: "groupB" }); jQuery(".drag-b").draggable({ revert: "invalid", scope: "groupB" }); jQuery(".drag-c").draggable({ revert: true, scope: "groupB" }); jQuery(".drag-d").draggable({ revert: false, scope: "groupB" }); jQuery(".drop").droppable({ scope: "groupB" }); |
revertDuration
さきほど revert を指定した要素の、戻りスピードです。ミリ秒で指定します。500で初期値です。
|
1 2 3 4 5 6 7 8 9 10 |
// ドラッグできるボックスは .drag（順にa~z） jQuery(".drag-a").draggable({ revert: true, revertDuration: 2000 }); jQuery(".drag-b").draggable({ revert: true, revertDuration: 500 }); |
重ね順系
CSSでいう position の z-index に似た効果になります。ドラッグ中とドラッグ後の重なりで分かれます。
| stack | id名 , class名 , 要素名（初期値はfalse） |
|---|---|
| zIndex | 数値（初期値はfalse） |
stack
グループ化したい要素のclass名を記述すると、グループ化した要素どうしで重なりあったときに常にドラッグした要素が最前面にくるようになります。
言葉だと分かりづらいのでサンプルで。 false が指定してある要素以外はドラッグして重なったときに最前面に来ます。false と比べてみてください。
|
1 2 3 4 5 6 |
// ドラッグできるボックスは .drag // グループ化するclass名は .groupC とします jQuery(".drag").draggable({ stack: ".groupC" }); |
zIndex
ドラッグしている最中のみ有効になる z-index を指定できます。
ドラッグ終了後には元に戻るので、ドラッグ中のみ最前列にする場合は zIndexで指定します。ドラッグ後に最前列にする場合はstackを使います。
|
1 2 3 4 5 |
// ドラッグできるボックスは .drag jQuery(".drag").draggable({ zIndex: 10 }); |
ドラッグに制限をかける系
ドラッグ要素に何かしらルールを設けるためのものです。
| axis | “x” , “y” （初期値はfalse） |
|---|---|
| cancel | id名 , class名 , 要素名（初期値はinput , textarea , button , select , option） |
| handle | id名 , class名 , 要素名（初期値はfalse） |
| scroll | ドラッグしながらスクロールを禁止する場合 false（初期値はtrue） |
| scrollSpeed | 数値（ミリ秒 初期値は 20） |
axis
移動方向を水平方向か垂直方向に限定させます。
水平限定なら“x”、垂直限定なら“y”です。
|
1 2 3 4 5 6 7 8 |
// ドラッグできるボックスは .drag（順にa~z） jQuery(".drag-14").draggable({ axis: "x" }); jQuery(".drag-15").draggable({ axis: "y" }); |
cancel
ドラッグを不可にするメソッドです。指定されたid名、class名、要素名を持っている要素はドラッグが効かなくなります。
|
1 2 3 4 5 6 |
// ドラッグできるボックスは .drag // キャンセルするclass名は drag-A とします jQuery(".drag").draggable({ cancel: ".drag-A" }); |
handle
ドラッグ可能な要素のなかでドラッグを許可する要素を指定します。
サンプルでは灰色白抜き文字部分しかドラッグ&ドロップができません。
|
1 2 3 4 5 6 |
// ドラッグできるボックスは .drag // ハンドル要素のclass名は handle とします jQuery(".drag").draggable({ handle: ".handle" }); |
scroll
ドラッグしながら画面のスクロールを許可するかどうかのメソッドです。
|
1 2 3 4 5 6 7 8 |
// ドラッグできるボックスは .drag（順にa~z） jQuery(".drag-a").draggable({ scroll: false }); jQuery(".drag-b").draggable({ scroll: true }); |
scrollSpeed
上記で指定したscrollメソッドのスピードを指定します。
数値で指定し、単位はミリ秒です。初期値は 20 です。
|
1 2 3 4 5 6 7 |
// ドラッグできるボックスは .drag // scrollメソッドとセットのため、scrollも指定しています jQuery(".drag-20").draggable({ scroll: true, scrollSpeed: 200 }); |
ドラッグの見た目系
ドラッグ中の見た目をいじります。上記の 重ね順系 もここに該当しますが、特殊なので別にしました。
| cursor | CSSの cursor プロパティと同じ値（初期値はauto） |
|---|---|
| cursorAt | top , left , right , bottom でpx単位で数値で指定（初期値はfalse） |
| opacity | 数値で0（透明）〜 1（不透明）（初期値はfalse） |
| distance | 数値（ミリ秒 初期値は 1） |
cursor
ドラッグ中のカーソル形状の指定になります。値にはCSSと同じ値が使えます。サンプルで一部紹介していますが、CSSのcursorプロパティの詳細はcursor－スタイルシートリファレンスで全ての値が見れますので参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ドラッグできるボックスは .drag（順にa~z） // ここでは一部プロパティしか扱ってません jQuery(".drag-a").draggable({ cursor: "pointer" }); jQuery(".drag-b").draggable({ cursor: "crosshair" }); jQuery(".drag-c").draggable({ cursor: "move" }); jQuery(".drag-d").draggable({ cursor: "wait" }); |
cursorAt
ドラッグ中のカーソル位置を指定します。ドラッグする要素に対して、top , left , right , bottom で指定できます。
サンプルでは左上にカーソルが来るようにしています。
数値でpx単位で指定します。
|
1 2 3 4 5 6 7 8 |
// ドラッグできるボックスは .drag jQuery(".drag").draggable({ cursorAt: { left: 0, top: 0 } }); |
opacity
ドラッグ中の透明度を指定します。
数値で0（透明）〜 1（不透明）で指定します。
|
1 2 3 4 5 |
// ドラッグできるボックスは .drag jQuery(".drag").draggable({ opacity: 0.5 }); |
distance
ドラッグしてからアニメーション開始するまでの時間を指定します。
数値で指定し、単位はミリ秒です。初期値は １ です。
|
1 2 3 4 5 |
// ドラッグできるボックスは .drag jQuery(".drag").draggable({ distance: 100 }); |
グリッド・スナップ系
グリッド（マス目）やスナップ（吸着）ができるメソッドです。IllustratorやFireworksなどでおなじみの機能を実装できます。
IllustratorやFireworksやったことなくて分からん！という人はサンプルをいじってもらうと分かりやすいと思います。
| grid | [x, y] で数値入力（初期値はfalse） |
|---|---|
| snap | true , false , 要素名 （初期値はfalse） |
| snapMode | inner , outer, both （初期値はboth） |
| snapTolerance | 数値（px単位 初期値は20） |
grid
ドラッグ要素を一定の間隔でしか移動させなくします。イメージ的には方眼紙のマス目通りにしか動かせなくするような感じです。IllustratorやFireworksのグリッドの感覚です。
|
1 2 3 4 5 6 |
// ドラッグできるボックスは .drag // x方向（横）を20、y方向（縦）を40 としています jQuery(".drag").draggable({ grid: [20, 40] }); |
snap
ドラッグ時に他の要素に吸着するかどうかを指定します。吸着のイメージが湧きづらければサンプルをいじってみてください。trueの要素がfalseの要素に吸い付きます。
|
1 2 3 4 5 |
// ドラッグできるボックスは .drag jQuery(".drag").draggable({ snap: true }); |
snapMode
上記のsnapのオプションです。吸い付き方を指定します。
innerで内側に、outerで外側に吸着させます。内側と外側 両方に吸着させる場合はbothを指定します。
初期値は both です。
|
1 2 3 4 5 6 7 8 9 10 11 |
// ドラッグできるボックスは .drag（順にa~z） // snap に付随するメソッドのため、snapをtrueに指定しています jQuery(".drag-a").draggable({ snap: true, snapMode: "outer" }); jQuery(".drag-b").draggable({ snap: true, snapMode: "inner" }); |
snapTolerance
これもsnapのオプションです。吸着を開始する距離を数値でpx単位で指定します。サンプルでは大きめの数値を入れているので、めっちゃ吸い込まれるのがわかるかと思います。
ドラッグに関数を入れる系
ドラッグをしたときに、用意されているイベントではなく独自のイベントを自分で組みたい！という場合はコチラで。
通常のjQueryで書けばOKです。
条件は「draggableが指定されている要素が〜」で読み換えて頂ければ。
| create | 生成されたとき（最初に読み込まれたとき） |
|---|---|
| drag | ドラッグしている最中 |
| start | ドラッグ開始のとき |
| stop | ドラッグ終了のとき |
create , drag , start , stop
まとめて一気に紹介します。サンプルで座標値が変化するタイミングが動作しているタイミングになります。
createは初期の位置の座標値から変化しません。
（ここでは最初にdraggableが有効になったタイミング
＝ ページが読み込まれたとき）
通常のjQueryのクリックイベントなどと組み合わせることで、最初に有効化するタイミングをコントロールすることができます。
dragはドラッグ中ずっと値が変わり続けますが、startはドラッグした瞬間の座標値から値が変わりません。
stopはドラッグが終わったときに座標値が変わります。
:
)
:
)
:
)
:
)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// ドラッグできるボックスは .drag（順にa~z） // 座標取得のコードは省いています // create jQuery(".drag-a").draggable({ create: function(){ // ここにjQueryでコードを書きます ; } }); // drag jQuery(".drag-b").draggable({ drag: function(){ // ここにjQueryでコードを書きます ; } }); // start jQuery(".drag-c").draggable({ start: function(){ // ここにjQueryでコードを書きます ; } }); // stop jQuery(".drag-d").draggable({ stop: function(){ // ここにjQueryでコードを書きます ; } }); |
※ 自分なりの解釈でまとめたので、用途があまり掴めないオプションは載せませんでした。あと、自分で使うならこうやるかな、という感じでサンプルを作ったので指定できるメソッドがまだあるオプションもあります。
また、jQueryUIを覚え立てでウキウキして作った記事なので誤りがあるかもです。
もしなにかお気づきの点などあれば @dutchisover まで教えていただけるとありがたいです！
初歩的なjQueryUIのドラッグ&ドロップの実装方法は コチラ の記事で書いてます。