jQuery UI逆引きリファレンス
Sortableウィジェットで並べ替え可能なリストを生成するには？
指定された要素配下の子要素群をドラッグ操作で並べ替え可能にするSortableウィジェットの基本的な使い方を説明する。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Sortableウィジェットは、指定された要素配下の子要素（群）をドラッグ操作で並べ替え可能にします。例えば以下は、テーブルの内容（欲しいものリスト）をSortableウィジェットで並べ替え可能にした例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sortableウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<style type="text/css">
table, th, td { border-collapse: collapse; border: solid 1px #000; }
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#list').sortable();
});
</script>
</head>
<body>
<table>
<thead>
<th>No.</th><th>項目</th>
</thead>
<!--1リスト・データを用意 -->
<tbody id="list">
<tr class="unsortable">
<th>1</th><td>財布</td>
</tr>
<tr>
<th>2</th><td>折りたたみ傘</td>
</tr>
<tr>
<th>3</th><td>ノートPC</td>
</tr>
<tr>
<th>4</th><td>ソファー</td>
</tr>
<tr>
<th>5</th><td>イオンドライヤー</td>
</tr>
<tr>
<th>6</th><td>乾燥機</td>
</tr>
<tr>
<th>7</th><td>デジカメ</td>
</tr>
<tr class="unsortable">
<th>8</th><td>コート</td>
</tr>
</tbody>
</table>
</body>
</html>
|
テーブルを並べ替え可能にする場合、データ行は<tbody>要素でくくります（1）。<table>要素の直下に、<tr>要素を列記しても並べ替え可能にはなりません（ブラウザーが内部的に<tbody>要素を補完してしまうためです）。
ソート対象のテーブルやリストが用意できたら、あとはsortableメソッドでソート機能を適用するだけです。sortableメソッドはデフォルトで「ターゲット要素直下の子要素全て」（セレクターで表現するならば「>*」）を並べ替えの対象としますが、その挙動を変更したいならば、itemsメソッドで対象となる要素（セレクター）を宣言します。例えば以下は、「class="unsortable"」でない<tr>要素をソート可能にする例です。
|
$('#list').sortable({ items: '> tr:not(.unsortable)' });
|
Sortableウィジェットで利用可能なパラメーター
sortableメソッドには、ハッシュ形式で以下のようなパラメーターを指定できます。
（1）forcePlaceHolderSize／placeholderパラメーター
プレイスホルダーにかかわるパラメーターです。プレイスホルダーとは、ドラッグによる並べ替え時に移動先に対して自動的に挿入される空白の項目のことです。まず、placeholderパラメーターは、プレイスホルダーに適用されるスタイル・クラスを表すパラメーターです。
例えば以下は、並べ替え可能なリストのプレイスホルダーに独自のスタイル（青の点線枠）を適用する例です。
|
<style type="text/css">
li { list-style-type: none; }
.sort-placeholder { border: 2px dotted Blue; }
</style>
……中略……
<script type="text/javascript">
$(function() {
$('#list').sortable({
placeholder: 'sort-placeholder'
});
});
</script>
……中略……
<ul id="list">
<li id="1">1. 財布</li>
<li id="2">2. 折りたたみ傘</li>
<li id="3">3. ノートPC</li>
<li id="4">4. ソファー</li>
<li id="5">5. イオンドライヤー</li>
<li id="6">6. 乾燥機</li>
<li id="7">7. デジカメ</li>
<li id="8">8. コート</li>
</ul>
|
ただし、デフォルトの状態では空の項目がつぶれて表示されてしまい、見た目には点線としてしか表示されません。そこでforcePlaceHolderSizeパラメーターを「true」（デフォルトは「false」）にすることで、強制的に空項目に一定のサイズ（高さ）を与えることができます。
|
$(function() {
$('#list').sortable({
placeholder: 'sort-placeholder',
forcePlaceholderSize: true
});
});
|
（2）cancelパラメーター
先ほどは、並べ替え可能な要素を限定するためにitemsパラメーターを利用しました。しかし、除外が目的であれば、cancelパラメーターを利用するのがより適当です。cancelパラメーターでは、並べ替えできない要素をセレクター式で指定します。例えば以下は、「class="unsortable"」である要素を並べ替えの対象から除外する例です。
|
$('#list').sortable({ cancel: '.unsortable' });
|
ただし、itemsパラメーターとcancelパラメーターの意味は、微妙に異なる点にも要注意です。というのも、cancelパラメーターは特定の要素をソート（ドラッグ）不能にするだけですが、itemsパラメーターで加えてドロップ対象からも除外します。結果、冒頭の例であれば、除外項目であるNo.1の直前、No.8の直後にはほかの要素をドロップ＃できなく＃なっていることを確認できるはずです。
（3）cursor／opacityパラメーター
並べ替え（ドラッグ）時の表示を制御するパラメーターです。cursorパラメーターでドラッグ時のマウス・ポインターの形状を、opacityパラメーターで透明度（「0」：透明～「1」：不透明）を表します。一般的には、以下のようにマウス・ポインターを移動時の形状にし、対象の要素を半透明にしておくことで、自然なドラッグの見栄えを表現できます。
|
$('#list').sortable({
cursor: 'move', opacity: 0.2
});
|
（4）updateパラメーター（イベント）
updateパラメーターには、ドラッグ操作によって、要素の並び順が変更されたタイミングで呼び出されるべきイベント・リスナーを指定します。例えば以下は、ドラッグしたタイミングで、最新の並び順をダイアログ表示する例です。
|
$('#list').sortable({
update: function(e, ui) {
window.alert($('#list').sortable('toArray'));
}
});
|
現在の並び順は、sortableメソッドにtoArrayキーワードを渡すことで、id値の配列として取得できます。サンプルでは、これをダイアログに表示させているだけですが、実際のアプリではこの値をサーバーに送信し、データベースなどに保存することになります。
※以下では、本稿の前後を合わせて5回分（第3回～第7回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
3. Tabsウィジェットでタブ・パネルを作成するには？
パネルの端に配置されたタブで内容を切り替えられるタブ・パネルを簡単に実装できる、jQuery UIのTabsウィジェットの基本的な使い方を説明する。
5. 【現在、表示中】≫ Sortableウィジェットで並べ替え可能なリストを生成するには？
指定された要素配下の子要素群をドラッグ操作で並べ替え可能にするSortableウィジェットの基本的な使い方を説明する。
6. Buttonウィジェットでさまざまなボタンを生成するには？
＜button＞、＜input type=”radio”＞、＜input type=”checkbox”＞、＜input type=”submit”＞、＜a＞といった要素を、一様にボタンに整形できるButtonウィジェットの基本的な使い方を説明する。
