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

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

Posted at April 11,2013 12:55 AM
Tag:[jQueryUI, Sortable]

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指定ではドラッグを開始したときにしかカーソルの表示が変わりませんが、このようにしておけばマウスでポイントしたときにソートできることが分かります。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)