jQuery-uiでTabelの行を並び替える

Tableの行をマウスのDrag&Dropで並び替えるには

jQuery-uiのsortableを使うといいらしい。

HTML

<table id="sample">

    <thead>

        <tr>

            <td>列名１</td>

            <td>列名２</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>あいてむ１</td>

            <td>あいうえお</td>

        </tr>

        <tr>

            <td>あいてむ２</td>

            <td>かきくけこ</td>

        </tr>

     </tbody>

</table>

JavaScript

$('#sample tbody').sortable().disableSelection();

列ヘッダーは並び替え対象外にする場合の例。