サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jQuery UIのSortableを使ってみる

jQuery UIのSortableを使ってみる

要素の順番をドラッグ&ドロップで並び替えることができるjQuery UIのSortableを使ってみます。

サンプルコード

必要なファイルを読み込みます。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

liの順番を並び替えてみます。

HTML

<ul id="sample">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
	<li>Item 6</li>
	<li>Item 7</li>
</ul>

JavaScript

$(function() {
	$('#sample').sortable();
});

Sortableのデモページ
 

オプション

オプション・メソッド・イベントの詳細は公式ドキュメントでご確認ください、

helper ヘルパー(ドラッグで動かす要素)を指定。
original:ドラッグ時に対象要素そのものを動かす。初期値。
clone:対象要素のクローンを作成して動かす。
helperのデモページ
appendTo ドラッグで動かす要素をどの要素に追加するかを指定。
初期値は’parent’。
appendToのデモページ
axis ドラッグできる方向を指定。
Xで水平方向、Yで垂直方向で、初期値はfalse。
axisのデモページ
cancel 並び替えできないようにする要素を指定。
cancelのデモページ
connectWith sortableを設定している他の要素へドラッグへ移動したい場合に指定。
初期値はfalse。
connectWithのデモページ
containment ドラッグで移動できる範囲を指定。
初期値はfalse。
containmentのデモページ
cursor ドラッグ時のカーソルの表示を指定。
初期値はauto。
cursorのデモページ
cursorAt ドラッグ時のカーソルに対する移動要素の位置を指定。
初期値はfalse。
cursorAtのデモページ
delay ドラッグを開始してから移動要素が実際に動き始めるまでの時間を指定。
初期値は0。
delayのデモページ
disabled 並び替えの機能を無効にするかどうか指定。
初期値はfalse。
disabledのデモページ
distance ドラッグを開始してから移動要素が実際に動き始めるまでのドラッグの距離を指定。
初期値は1。
distanceのデモページ
dropOnEmpty ドロップ先の要素の中身が空の場合にドロップできるかどうかを設定。
初期値はtrue。
dropOnEmptyのデモページ
forceHelperSize ドラッグ要素のサイズを保持させる?
初期値はfalse。
forceHelperSizeのデモページ
forcePlaceholderSize placeholder(ドラッグ時の空白の領域に入る要素)のサイズを保持させる?
初期値はfalse。
forcePlaceholderSizeのデモページ
grid 移動要素がグリッドに沿って吸着して移動するように移動させるように指定。
初期値はfalse。
gridのデモページ
handle ドラッグの対象になる部分を指定。
初期値はfalse。
handleのデモページ
items 並び替えの対象にする要素を指定。
初期値は”> *”
itemsのデモページ
opacity ドラッグで移動時の移動要素の透明度を指定。
初期値はfalse。
opacityのデモページ
placeholder placeholdre(ドラッグ時の空白の領域に入る要素)のclass名を指定。
初期値はfalse
placeholderのデモページ
revert ドラッグで移動後に新しい位置までアニメーションで移動させるかどうかを設定。
初期値はfalse。
revertのデモページ
scroll ドラッグで画面の端まで要素を移動させたときに画面をスクロールさせるかどうかを指定。
初期値はtrue。
scrollのデモページ
scrollSensitivity scrollがtrueの場合に画面端のどこまできたらスクロールを開始するかを指定。
初期値は20。
scrollSensitivityのデモページ
scrollSpeed scrollがtrueの場合のスクロールの速さを指定。
初期値は20。
scrollSpeedのデモページ
tolerance 並び替えの条件を指定。
intersect:対象要素が他の要素と50%以上重なったときに並び替え。初期値。
pointer:カーソルが他の要素と重なったときに並び替え。
toleranceのデモページ
zIndex 移動要素のz-indexを指定。
初期値は1000。
zIndexのデモページ

 

メソッド

メソッド設定のデモページ

cancel 並び替えを現在の状態から一つ前の状態に戻す。
destroy 並び替えの機能を破棄。
disable 並び替えの機能を無効にする。
enable 並び替えの機能を有効にする。
instance インスタンスオブジェクトを取得。
option 指定されているオプションの取得やオプションの設定を行う。
refresh 並び替えの要素を更新。
refreshPositions 並び替え要素のキャッシュされた位置を更新。
serialize 不明。
toArray 不明。
widget 並び替え要素を含むjQueryオブジェクトを返す。

 

イベント

activate ドラッグが開始されたときに発火。
activateのデモページ
beforeStop 移動完了時に発火。
beforeStopのデモページ
change ドラッグで移動して、DOMの並び順が変更されたときに発火。
changeのデモページ
create 並び替え機能の準備ができたときに発火。
createのデモページ
deactivate 並び替えが停止した時に発火。
deactivateのデモページ
out 並び替えの範囲から離れてドラッグした時に発火。
outのデモページ
over 並び替え要素が移送した時に発火。
overのデモページ
receive 別のリストから並び替え要素がドロップされたときに発火。
receiveのデモページ
remove 並び替え要素が別のリストにドロップされたときに発火。
removeのデモページ
sort ドラッグ中に発火。
sortのデモページ
start 並び替えのドラッグ開始時に発火。
startのデモページ
stop 並び替えを停止した時に発火。
stopのデモページ
update 並び替えてから停止した時に発火。
updateのデモページ

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP