[jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】

こんにちは! 　いわだて (@dutchisover) です！　ドラッグ＆ドロップに夢中のいわだて (@dutchisover) です！今回はdraggableを実装してからの【オプション】についてです。

drag_drop2

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

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

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

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

content

1 指定要素にドラッグ&ドロップさせる系
2 指定要素にドラッグ&ドロップさせるときのオプション
3 重ね順系
4 ドラッグに制限をかける系
5 ドラッグの見た目系
6 グリッド・スナップ系
7 ドラッグに関数を入れる系

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

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

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

connectToSortable	id名 , class名 , 要素名（初期値はfalse）
scope	グループ名（droppableに同じグループ名を付けて使う　初期値はdefault）
containment	id名 , class名 , 要素名（初期値はfalse）

connectToSortable

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

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

connectToSortable
: “.drop-area”

connectToSortable
: false

class=”drop-area”

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

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

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

// ドロップできるドロップ要素は .drop（順にa~z）

jQuery(".drag-a").draggable({

connectToSortable: ".drop"

});

jQuery(".drag-b").draggable({

connectToSortable: false

});

jQuery(".drop").sortable({

});

scope

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

scope: “groupA”

scope: “default”

scope: “groupA”

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

// ドラッグできるボックスは .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分も越えることはできません）

containment: “parent”

containment: false

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

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

// ドラッグできるボックスは .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でドロップ要素と紐付けをしています。

helper: “clone”

helper: “original”

helper: “clone”の要素と紐付け済

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

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

// ドラッグできるボックスは .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でドロップ要素と紐付けをしています。

revert: “valid”

revert: “invalid”

revert: true

revert: false

revert: “valid”ならエリア内で、”invalid”ならエリア外のときにドラッグ前の位置に戻ります。

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

// ドラッグできるボックスは .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で初期値です。

revertDuration: 2000

revertDuration: 500（初期値）

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

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

// ドラッグできるボックスは .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 と比べてみてください。

stack: class=”drag”

stack: false

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

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

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

// グループ化するclass名は .groupC とします

jQuery(".drag").draggable({

stack: ".groupC"

});

zIndex

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

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

zIndex: “10”

zIndex: false

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

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

// ドラッグできるボックスは .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”です。

axis: “x”

axis: “y”

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

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

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

jQuery(".drag-14").draggable({

axis: "x"

});

jQuery(".drag-15").draggable({

axis: "y"

});

cancel

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

cancel: class=”.drag-A”

cancel: なし

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

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

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

// キャンセルするclass名は drag-A とします

jQuery(".drag").draggable({

cancel: ".drag-A"

});

handle

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

handle: “.handle”

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

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

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

// ハンドル要素のclass名は handle とします

jQuery(".drag").draggable({

handle: ".handle"

});

scroll

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

scroll: false

scroll: true

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

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

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

jQuery(".drag-a").draggable({

scroll: false

});

jQuery(".drag-b").draggable({

scroll: true

});

scrollSpeed

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

scrollSpeed: 200

scrollSpeed: 20

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

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

// ドラッグできるボックスは .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－スタイルシートリファレンスで全ての値が見れますので参考まで。

cursor: “pointer”

cursor: “crosshair”

cursor: “move”

cursor: “wait”

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

// ドラッグできるボックスは .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単位で指定します。

cursorAt: { left: 0, top: 0 }

cursorAt: false

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

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

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

jQuery(".drag").draggable({

cursorAt: {

left: 0,

top: 0

}

});

opacity

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

opacity: 0.5

opacity: false

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

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

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

jQuery(".drag").draggable({

opacity: 0.5

});

distance

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

distance: 100

distance: 1

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

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

// ドラッグできるボックスは .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のグリッドの感覚です。

grid: [20, 40]

grid: false

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

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

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

// x方向（横）を20、y方向（縦）を40 としています

jQuery(".drag").draggable({

grid: [20, 40]

});

snap

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

snap: true

snap: false

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

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

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

jQuery(".drag").draggable({

snap: true

});

snapMode

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

snapMode: “outer”

snapMode: “inner”

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

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

// ドラッグできるボックスは .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はドラッグが終わったときに座標値が変わります。

create (

)

drag (

)

start (

)

stop (

)

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

// ドラッグできるボックスは .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のドラッグ&ドロップの実装方法はコチラの記事で書いてます。

[jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】

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

connectToSortable

scope

containment

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

helper

revert

revertDuration

重ね順系

stack

zIndex

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

axis

cancel

handle

scroll

scrollSpeed

ドラッグの見た目系

cursor

cursorAt

opacity

distance

グリッド・スナップ系

grid

snap

snapMode

snapTolerance

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

create , drag , start , stop

jQuery の他の記事

最近の記事

content

Sponsored