小粋空間  -  a cheap joke and a play on words site

jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする

jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする方法を紹介します。

テーブルをソートするには、jQuery UI Soatableを利用します。

１．基本

まず、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です。

２．ドラッグ＆ドロップ中にテキストを選択できないようにする

ドラッグ＆ドロップ中にテキストを選択できないようにするには、disableSelection()を追加します。

$(function(){
    $('tbody').sortable();
    $('tbody').disableSelection();
});

３．オプション

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
    });
});

４．イベント

jQuery UI Soatableで用意されているイベントを2つだけ紹介します。

start

ソートが開始したときに実行します。

$(function(){
    $('tbody').sortable({
        start: function( event, ui ) {
            // ...
        }
    });
});

stop

ソートが終了したときに実行します。ソート状態をcookieに保持するときなどに使えると思います。

$(function(){
    $('tbody').sortable({
        stop: function( event, ui ) {
            // ...
        }
    });
});

他にも色々あるので試してみてください。

５．CSS

サンプルではソートするときのポインタを次のように指定しています。

tr:hover {
    cursor: move;
}

オプションのcursor指定ではドラッグを開始したときにしかカーソルの表示が変わりませんが、このようにしておけばマウスでポイントしたときにソートできることが分かります。