うまく説明するのが難しいので、一番はデモ を見てもらうことでしょうか。
（この記事の最後にもデモを用意しています）
リスト表示をしていてその順番を入れ替えたいときに、古典的なやり方をしようとしたら、プルダウンメニューで順番に選択して言ったり、ボタンで画面遷移を繰り返しながら順番を入れ替えるという方法があるかもしれませんが、jQuery UIを使えば簡単にスタイリッシュな並び替え画面を実装することが出来ます。
jQuery UI Sortableの使い方
まず始めに、jQuery本体とjQuery UIをロードできるようにしておきます。
自サーバーに無い場合は、Google code上にホストされているものを利用してもよいかもしれません。
最も簡単な使い方は、下記のようにulタグにidを指定して実際に動かすためのliタグを記述します。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><>
実際にSortableの機能を制御しているjQueryスクリプトは、ハイライト表示している4行のみです。
ulタグに指定するidは、jQueryの制御スクリプト内に指定している「$("#id名")」部分と一致していれば何でもかまいません。
liタグの各々にidを指定しているのは、並べている状態をシリアライズしてURL用のパラメータとして取得するためです。（詳しくは後述）
Sotableには幾つかのオプションがあります。
上記で指定しているのは、「items」で動かす対象のDOM要素（デフォルトでもliタグは自動認識してくれますが）、cursorで要素をドラッグしたときのマウスカーソルのスタイル、opacityで動かした際の透明度を指定しています。
なんとなく、スタイル系の変更はCSSで直接した方が早いような気もしますが。
この他にも多くのオプションや、動作時のイベントをフックさせることも出来ます。
詳しくは、下記のサイトが参考になるかと思います。
jQuery UI API 1.8.4 日本語リファレンス > Interactions > Sortable ＠ Stack Trace
上記の例では、liタグを動かす対象にしましたが、その他にもdivタグやtableタグでも動かすことが可能です。
<table id="sortable"> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> <tr><td>Item 3</td></tr> <tr><td>Item 4</td></tr> <tr><td>Item 5</td></tr></table>
ただし、divタグは自動で要素を認識しえくれますが、tableタグを使う場合は、itemsオプションにtrを指定する必要があります。
（じゃないと、テーブルごと動いてしまいます）
$("#sortable").sortable({ items: 'tr' });
簡単に導入できるので、既存のサイトでもそんなに手を加えることなく変更することも可能ではないでしょうか。
jQuery UIのSotableを使ったちょっとしたサンプルコード
せっかくなので、デモサイトに少し手を加えてソート対象要素の追加・削除や送信時のパラメータ取得ができるサンプルコードを書いてみました。
- リストの並び替え、追加、削除、送信（するためのパラメータ取得）をするデモ
リストをドラッグ＆ドロップで並び替えるだけでなく、「Add Item」のリンクからリストを追加できます。
削除はリストの右脇にある「×」ボタンで行います。
「Send Data」のリンクをクリックすると、リストの状態をシリアライズしてURLパラメータに変換してくれます。
実際には、送信先にこのURLを付け加えれば状態を保存するということも出来るでしょう。
ソースコードは下記のようになります。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link rel=">
シリアライズの部分で少しはまったので補足しておくと、動かす対象のliタグのid名で「id名-数値」のようにしておくことで、パラメータは「id名=数値」というように分割して生成されます。
意図的にURLのキーを変更したい場合は、
$("#sortable").sortable("serialize", {key:'order[]'})
のように、第2引数の「key」にキー名を指定します。
こうすることで、
order[]=1&order[]=2&order[]=3&order[]=4&order[]=5
というようなURLを生成することができます。
jQuery UIのマニュアルを見ると、ポートレットのような機能を作ることも出来るみたいなので、用途の幅は結構広いかもしれません。
[PR]
[PR]
関連記事
[JS] Webアプリケーションでデスクトップへの通知機能を作る
APC+jQuery UIを使ってファイルアップロード時にプログレスバーを表示する
Twitter入力フォームのように文字カウントしてくれるcharacter count
Googleサジェストが実装できるjQuery Autocomplete Mod
高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]