テーブルの行（tr要素）をドラッグアンドドロップで並べ替える。

jQuery UIにdraggableというドラッグ用の拡張があるがtr要素に対してはできないのでまた別のプラグインを使う。

Table Drag and Drop JQuery plugin | Isocra

こいつを使う。

内部の挙動も単純で、余計なことしないっぽいのでこれにした。

まずソート対象のテーブル自体を用意する

<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr id="hoge-0" hogeId="0">
            <td class="handle">
                <img alt="ここを掴む" src="hoge.png" />
            </td>
            <td>hoge0</td>
            <td>piyo0</td>
            <td>fuga0</td>
        </tr>
        <tr id="hoge-1" hogeId="1">
            <td class="handle">
                <img alt="ここを掴む" src="hoge.png" />
            </td>
            <td>hoge1</td>
            <td>piyo1</td>
            <td>fuga1</td>
        </tr>
        <tr id="hoge-2" hogeId="2">
            <td class="handle">
                <img alt="ここを掴む" src="hoge.png" />
            </td>
            <td>hoge2</td>
            <td>piyo2</td>
            <td>fuga2</td>
        </tr>
        <tr id="hoge-3" hogeId="3">
            <td class="handle">
                <img alt="ここを掴む" src="hoge.png" />
            </td>
            <td>hoge3</td>
            <td>piyo3</td>
            <td>fuga3</td>
        </tr>
    </tbody>
</table>

そしてこのテーブルに対してドラッグで並べ替える機能を付与する

$("table").tableDnD();

これ一行で行全体を掴んで並べ替えることが可能になる

掴める部分を限定したい場合はその指定をセレクタで書くことができる。 imgタグの部分のみ掴めるようにするならば

$("table").tableDnD({
    dragHandle: ".handle img"
});

のようにする。そうすると

table .handle img

でセレクトされる要素のみが掴める対象になる

並べた替えた後に何かしたい場合はonDropのコールバックを行う。 コードはtableDnDの内部ソースからパクった。

コールバック関数の第一引数にはtable全体のDOM, 第二引数にはドラッグしたDOMが渡される。DOMねDOM

$("table").tableDnD({
    onDrop: function(table, row){
        var rows = table.rows;
        for(var i = 1; i < rows.length; i++){
            console.log(rows[i].getAttribute("hogeId"));
        }
    });

ループインデックスが1から始まっているのはヘッダー行を読まないようにしているから。 tableDnD自体はtheadをドラッグ可能対象から外しているようだ。

サンプルのソート対象のテーブルに全行id属性をつけているのはtableDnDが内部でidとかの値を用いて順番が変更されたか否かをチェックしているから。

順番が変更されていないとみなされたときonDropのコールバックは呼び出されないようになっている。なのでidをつけてそのマーカーとしている。

2012-09-26