要素の順番をドラッグ＆ドロップで並び替えることができる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();
});
オプション
オプション・メソッド・イベントの詳細は公式ドキュメントでご確認ください、
| 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のデモページ |
【参考サイト】
コメントが承認されるまで時間がかかります。