jQuery UIを使ってテーブルをドラッグ&ドロップでソートできるようにする
jQuery UIを使ってテーブルをドラッグ&ドロップでソートできるようにする方法を紹介します。
テーブルをソートするには、jQuery UI Soatableを利用します。
1.基本
まず、jQueryのsoatable()を使ったテーブルのサンプルを示します。
サンプルのコード(抜粋)は次のとおりです。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
$('tbody').sortable();
});
</script>
<table>
<thead>
<tr>
<th>Name</th><th>Salary</th>
</tr>
</thead>
<tbody>
<tr><td>Bloggs, Fred</td><td>$12000.00</td></tr>
<tr><td>Turvey, Kevin</td><td>$191200.00</td></tr>
<tr><td>Mbogo, Arnold</td><td>$32010.12</td></tr>
<tr><td>Shakespeare, Bill</td><td>$122000.00</td></tr>
<tr><td>Shakespeare, Hamnet</td><td>$9000</td></tr>
<tr><td>Fitz, Marvin</td><td>$3300</td></tr>
</tbody>
</table>
jQueryおよびjQuery UIのライブラリを読み出し、あとはソートしたいテーブルの親要素または親要素のid属性やclass属性を指定して、sortable()を実行するだけです。
$(function(){
$('tbody').sortable();
});
テーブル以外の要素もソートできます。ul/li要素はもちろん、divの組み合わせでもOKです。
2.ドラッグ&ドロップ中にテキストを選択できないようにする
ドラッグ&ドロップ中にテキストを選択できないようにするには、disableSelection()を追加します。
$(function(){
$('tbody').sortable();
$('tbody').disableSelection();
});
3.オプション
jQuery UI Soatableで用意されているオプションをいくつか紹介します。
cursor
ドラッグ&ドロップ中のカーソルのスタイルを指定します。
$(function(){
$('tbody').sortable({
cursor: "move"
});
});
distance
ドラッグ&ドロップを開始するまでに移動距離を設定します。値が少ない方がドラッグ&ドロップが早く開始します。
$(function(){
$('tbody').sortable({
distance: 5
});
});
grid
ドラッグ&ドロップをグリッドにあわせて移動します。x方向とy方向のグリッド幅を配列で設定します。
$(function(){
$('tbody').sortable({
grid: [ 20, 10 ]
});
});
opacity
ドラッグの透過度を設定します。
$(function(){
$('tbody').sortable({
opacity: 0.5
});
});
revert
ドロップしたときにアニメーションでスムーズな動きにします。
$(function(){
$('tbody').sortable({
revert: true
});
});
4.イベント
jQuery UI Soatableで用意されているイベントを2つだけ紹介します。
start
ソートが開始したときに実行します。
$(function(){
$('tbody').sortable({
start: function( event, ui ) {
// ...
}
});
});
stop
ソートが終了したときに実行します。ソート状態をcookieに保持するときなどに使えると思います。
$(function(){
$('tbody').sortable({
stop: function( event, ui ) {
// ...
}
});
});
他にも色々あるので試してみてください。
5.CSS
サンプルではソートするときのポインタを次のように指定しています。
tr:hover {
cursor: move;
}
オプションのcursor指定ではドラッグを開始したときにしかカーソルの表示が変わりませんが、このようにしておけばマウスでポイントしたときにソートできることが分かります。
- jQuery UI Soatableでソートしたテーブルの並びを保存する方法
- jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法