Isa@Diary

ソフトウェア開発やってます。プログラミングとか、US生活とかについて書きます。

jquery-sortableのtableでの使用でth行を動かさない

[追記] 正しいコード例が間違っていました。

jQuery-UIにsortableというのがある。
li要素やらtr要素をD&Dで並び替えられるスグレモノである。

tableに適用する際に、
はじめの1行(<tr><th></th></tr>)は並べ替えさせたくない
という状況になることはままあることだと思う。これについてぐぐると

<table id='sortable'>
  <tr><th>一番上</th></tr>
  <tbody>
    <tr><td>hoge</td></tr>
    <tr><td>piyo</td></tr>
  </tbody>
</table>

と1行目以降はtbodyから吐き出すとうまくという記事を見かけたので試してみたものの
ブラウザがtbodyを挿入してくれてしまい結局入れ替えられてしまった。

これの解決策として結局

<table id='sortable'>
  <thead><tr><th>一番目</th></tr></thead>
  <tbody>
    <tr><td>hoge</td></tr>
    <tr><td>piyo</td></tr>
  </tbody>
</table>

とした上で
js側で

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

とすることで一番上はD&Dできなくなった。