<script type="text/javascript"> var option={ stop : function(){ var data=[]; $("tr td.key","#sortable tbody").each(function(i,v){ data.push(v.innerHTML); }); $('#viewSortlist').html(data.toString()).css("background-color","#eee"); } }; $(function() { $("#sortable tbody").sortable(option); $("#sortable tbody").disableSelection(); }); </script> <table id="sortable"> <tr><th>0</th><th>000</th></tr> <tbody> <tr><td class="key">1</td><td>AAA</td></tr> <tr><td class="key">2</td><td>BBB</td></tr> <tr><td class="key">3</td><td>CCC</td></tr> <tr><td class="key">4</td><td>DDD</td></tr> </tbody> </table> <div id="viewSortlist">ここへ並べ替えた順番を出力</div>
jQuery - Sortable はオブジェクトの id を指定して sortable と書くだけで簡単にリストを並べ替えることができる。
しかし、テーブルはそれだけでは意図した動作をしない。
テーブルの行を並べ替えるには、tbody タグを入れる。
$("#sortable tbody").sortable(option);
<table id="sortable"> <tr><th>0</th><th>000</th></tr> <tbody> <tr><td class="key">1</td><td>AAA</td></tr>
tbody タグ内の要素を動かすように指定しているので、タイトル行を tbody の外に出せばいい
<table id="sortable"> <tr><th>0</th><th>000</th></tr> <tbody>
テーブルに id など一意の数字を振っておいて、並び替え後に結果を取得する
var option={ stop : function(){ var data=[]; $("tr td.key","#sortable tbody").each(function(i,v){ data.push(v.innerHTML); }); $('#viewSortlist').html(data.toString()).css("background-color","#eee"); } };
$("#sortable tbody").sortable(option);
<div id="viewSortlist">ここへ並べ替えた順番を出力</div>