メソッドはけっこうな数が用意されていて、ドラッグ&ドロップに関してはなんでもできちゃいそうです。のでまとめました。

ドラッグ&ドロップってどうやって実装するの？という場合は コチラ の記事で詳しく書きました！よければどうぞ！

また今回は使用用途ごとにジャンル分けしてまとめました。上記の目次からジャンルを確認できます。

この記事はJQuery UI – SakuraSaku jQuery Libraryさんのサイトを超参考にさせていただきました。

指定要素にドラッグ&ドロップさせる系

ドロップ先を限定する場合に使うメソッドです。

紐付けしたあとに他のメソッドと組み合わせてなにかするようなものが多いです。

connectToSortable

ドラッグ要素を特定のドロップ要素にだけしかドラッグできなくさせます。

左のボックスはconnectToSortableでドロップ要素のclass名を指定していますのでドラッグに制限があります。
右のボックスはどこにでもドラッグできます。

[javascript]

// ドラッグできるボックスは .drag（順にa~z）
// ドロップできるドロップ要素は .drop（順にa~z）

jQuery(".drag-a").draggable({
connectToSortable: ".drop"
});
jQuery(".drag-b").draggable({
connectToSortable: false
});
jQuery(".drop").sortable({

});

[/javascript]

scope

左のドロップ要素は指定なし、右の要素はscopeでグループ名を指定してます。
ボックスをドラッグすると、scope名の指定されているドロップ要素だけ黒くなります。

[javascript]

// ドラッグできるボックスは .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 でドラッグ中にドロップ要素に色が付くようにしています。

[/javascript]

containment

左のボックスはcontainmentに parent が指定されており、親要素にあたる枠線から外にはドラッグできません。（親要素にpaddingが指定されているため padding分も越えることはできません）

[javascript]

// ドラッグできるボックスは .drag（順にa~z）

jQuery(".drag-a").draggable({
containment: "parent"
});
jQuery(".drag-b").draggable({
containment: false
});

[/javascript]

指定要素にドラッグ&ドロップさせるときのオプション

ここでは先ほど紐付けした要素に絡めて使うオプションです。単体での使い方はあまりわかっていません(笑)すいません。

helper

helper: “clone”を指定すると、ドラッグ時に元の要素を残したまま、コピーをドラッグします。
helper: “original”はそのままドラッグした要素が移動します。
また、紐付けしたドロップ要素があればクローンをいくらでもドラッグ&ドロップできます。ここではconnectToSortableでドロップ要素と紐付けをしています。

[javascript]

// ドラッグできるボックスは .drag（順にa~z）
// ドロップできるドロップ要素は .drop（順にa~z）

jQuery(".drag-a").draggable({
helper: "clone",
connectToSortable: ".drop"
});
jQuery(".drag-b").draggable({
helper: "original"
});
jQuery(".drop").sortable();

[/javascript]

revert

revert: “valid”ならエリア内で、revert: “invalid”ならエリア外のときにドラッグ前の位置に戻ります。
また、revert: trueはエリア内でもどこでも戻ってきます。revert: falseはどこでも戻りません（初期値の状態）

ここではscopeでドロップ要素と紐付けをしています。

[javascript]

// ドラッグできるボックスは .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"
});

[/javascript]

revertDuration

さきほど revert を指定した要素の、戻りスピードです。ミリ秒で指定します。500で初期値です。

[javascript]

// ドラッグできるボックスは .drag（順にa~z）

jQuery(".drag-a").draggable({
revert: true,
revertDuration: 2000
});
jQuery(".drag-b").draggable({
revert: true,
revertDuration: 500
});

[/javascript]

重ね順系

CSSでいう position の z-index に似た効果になります。ドラッグ中とドラッグ後の重なりで分かれます。

stack

グループ化したい要素のclass名を記述すると、グループ化した要素どうしで重なりあったときに常にドラッグした要素が最前面にくるようになります。

言葉だと分かりづらいのでサンプルで。 false が指定してある要素以外はドラッグして重なったときに最前面に来ます。false と比べてみてください。

[javascript]

// ドラッグできるボックスは .drag
// グループ化するclass名は .groupC とします

jQuery(".drag").draggable({
stack: ".groupC"
});

[/javascript]

zIndex

ドラッグしている最中のみ有効になる z-index を指定できます。

ドラッグ終了後には元に戻るので、ドラッグ中のみ最前列にする場合は zIndexで指定します。ドラッグ後に最前列にする場合はstackを使います。

[javascript]

// ドラッグできるボックスは .drag

jQuery(".drag").draggable({
zIndex: 10
});

[/javascript]

ドラッグに制限をかける系

ドラッグ要素に何かしらルールを設けるためのものです。

axis

移動方向を水平方向か垂直方向に限定させます。
水平限定なら“x”、垂直限定なら“y”です。

[javascript]

// ドラッグできるボックスは .drag（順にa~z）

jQuery(".drag-14").draggable({
axis: "x"
});
jQuery(".drag-15").draggable({
axis: "y"
});

[/javascript]

cancel

ドラッグを不可にするメソッドです。指定されたid名、class名、要素名を持っている要素はドラッグが効かなくなります。

[javascript]

// ドラッグできるボックスは .drag
// キャンセルするclass名は drag-A とします

jQuery(".drag").draggable({
cancel: ".drag-A"
});

[/javascript]

handle

ドラッグ可能な要素のなかでドラッグを許可する要素を指定します。
サンプルでは灰色白抜き文字部分しかドラッグ&ドロップができません。

[javascript]

// ドラッグできるボックスは .drag
// ハンドル要素のclass名は handle とします

jQuery(".drag").draggable({
handle: ".handle"
});

[/javascript]

scroll

ドラッグしながら画面のスクロールを許可するかどうかのメソッドです。

[javascript]

// ドラッグできるボックスは .drag（順にa~z）

jQuery(".drag-a").draggable({
scroll: false
});
jQuery(".drag-b").draggable({
scroll: true
});

[/javascript]

scrollSpeed

上記で指定したscrollメソッドのスピードを指定します。
数値で指定し、単位はミリ秒です。初期値は 20 です。

[javascript]

// ドラッグできるボックスは .drag
// scrollメソッドとセットのため、scrollも指定しています

jQuery(".drag-20").draggable({
scroll: true,
scrollSpeed: 200
});

[/javascript]

ドラッグの見た目系

ドラッグ中の見た目をいじります。上記の 重ね順系 もここに該当しますが、特殊なので別にしました。

cursor

ドラッグ中のカーソル形状の指定になります。値にはCSSと同じ値が使えます。サンプルで一部紹介していますが、CSSのcursorプロパティの詳細はcursor－スタイルシートリファレンスで全ての値が見れますので参考まで。

[javascript]

// ドラッグできるボックスは .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"
});

[/javascript]

cursorAt

ドラッグ中のカーソル位置を指定します。ドラッグする要素に対して、top , left , right , bottom で指定できます。
サンプルでは左上にカーソルが来るようにしています。
数値でpx単位で指定します。

[javascript]

// ドラッグできるボックスは .drag

jQuery(".drag").draggable({
cursorAt: {
left: 0,
top: 0
}
});

[/javascript]

opacity

ドラッグ中の透明度を指定します。
数値で0（透明）〜 1（不透明）で指定します。

[javascript]

// ドラッグできるボックスは .drag

jQuery(".drag").draggable({
opacity: 0.5
});

[/javascript]

distance

ドラッグしてからアニメーション開始するまでの時間を指定します。
数値で指定し、単位はミリ秒です。初期値は １ です。

[javascript]

// ドラッグできるボックスは .drag

jQuery(".drag").draggable({
distance: 100
});

[/javascript]

グリッド・スナップ系

グリッド（マス目）やスナップ（吸着）ができるメソッドです。IllustratorやFireworksなどでおなじみの機能を実装できます。

IllustratorやFireworksやったことなくて分からん！という人はサンプルをいじってもらうと分かりやすいと思います。

grid

ドラッグ要素を一定の間隔でしか移動させなくします。イメージ的には方眼紙のマス目通りにしか動かせなくするような感じです。IllustratorやFireworksのグリッドの感覚です。

[javascript]

// ドラッグできるボックスは .drag
// x方向（横）を20、y方向（縦）を40 としています

jQuery(".drag").draggable({
grid: [20, 40]
});

[/javascript]

snap

ドラッグ時に他の要素に吸着するかどうかを指定します。吸着のイメージが湧きづらければサンプルをいじってみてください。trueの要素がfalseの要素に吸い付きます。

[javascript]

// ドラッグできるボックスは .drag

jQuery(".drag").draggable({
snap: true
});

[/javascript]

snapMode

上記のsnapのオプションです。吸い付き方を指定します。
innerで内側に、outerで外側に吸着させます。内側と外側 両方に吸着させる場合はbothを指定します。
初期値は both です。

[javascript]

// ドラッグできるボックスは .drag（順にa~z）
// snap に付随するメソッドのため、snapをtrueに指定しています

jQuery(".drag-a").draggable({
snap: true,
snapMode: "outer"
});
jQuery(".drag-b").draggable({
snap: true,
snapMode: "inner"
});

[/javascript]

snapTolerance

これもsnapのオプションです。吸着を開始する距離を数値でpx単位で指定します。サンプルでは大きめの数値を入れているので、めっちゃ吸い込まれるのがわかるかと思います。

ドラッグに関数を入れる系

ドラッグをしたときに、用意されているイベントではなく独自のイベントを自分で組みたい！という場合はコチラで。

通常のjQueryで書けばOKです。

条件は「draggableが指定されている要素が〜」で読み換えて頂ければ。

create , drag , start , stop

まとめて一気に紹介します。サンプルで座標値が変化するタイミングが動作しているタイミングになります。

createは初期の位置の座標値から変化しません。
（ここでは最初にdraggableが有効になったタイミング
　 ＝ ページが読み込まれたとき）
通常のjQueryのクリックイベントなどと組み合わせることで、最初に有効化するタイミングをコントロールすることができます。

dragはドラッグ中ずっと値が変わり続けますが、startはドラッグした瞬間の座標値から値が変わりません。

stopはドラッグが終わったときに座標値が変わります。

[javascript]

// ドラッグできるボックスは .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でコードを書きます ;
}
});

[/javascript]

※ 自分なりの解釈でまとめたので、用途があまり掴めないオプションは載せませんでした。あと、自分で使うならこうやるかな、という感じでサンプルを作ったので指定できるメソッドがまだあるオプションもあります。

また、jQueryUIを覚え立てでウキウキして作った記事なので誤りがあるかもです。
もしなにかお気づきの点などあれば @dutchisover まで教えていただけるとありがたいです！

初歩的なjQueryUIのドラッグ&ドロップの実装方法は コチラ の記事で書いてます。