テーブルをマウスで並び替えるには、jQuery UI の機能 sortable を利用する事で実装可能です。
jQuery UI sortable API
http://api.jqueryui.com/sortable/
テーブルをマウスで並び替えれるようにする
いつも通り
・JavaScriptファイルのインクルード
・CSSファイルのインクルード
・テーブルタグ設置
・タグに対しての関数コール
が必要です。
<head>
<link type="text/css" href="jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".sortable > tbody").sortable();
}
</script>
</head>
<body>
<table class="sortable">
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>taro</td>
</tr>
<tr>
<td>1</td>
<td>yuka</td>
</tr>
<tr>
<td>2</td>
<td>kazuya</td>
</tr>
<tr>
<td>3</td>
<td>shinya</td>
</tr>
</tbody>
</table>
</body>はいこれだけです。
tableに、thead（Table Header） と tbody（Table Body）を指定しておいて、
tbodyに対して関数をコールするだけです。
sortableの関数自体が、ulタグなどの並び替えたいタグの親タグを指定しますのでそういう事です。
$(".sortable > tbody").sortable();できました～～～～とは言えませんよね。
並び替えれて終わりだなんて事はありません。
この入れ替えた情報をデータに反映させたりしましょう。
並び替えた結果をデータに反映する
イベントの説明をしていませんが、とりあえず update イベントを設定します。
updateイベントは、並び替えが成功したタイミングで発生します。
並び替えようとして、元に戻した場合は発生しません。
ではテーブルにupdateイベントを設定しましょう。
// tableに表示されているデータリスト
var data = [
{ id:0, name:"taro" },
{ id:1, name:"yuka" },
{ id:2, name:"kazuya" },
{ id:3, name:"shinya" }
];
$(".sortable tbody").sortable({
// 並び替え更新時コールバック
update : function( event, ui ){
// 並び替えた要素を取得
var $tr = ui.item;
// 最初のtdにidが書き込まれている
var $td_Id = $tr.children("td:eq(0)");
var id = $td_Id.text();
// 元データのどこにあったか検索し、発見したら並び替え
for( var i = 0 ; i < data.length ; ++i ){
var rData = data[i];
if( rData.id != id ) continue;
// 配列データの並び替え
var temp = rData;
data.splice( i, 1 );
data.splice( $tr.index(), 0, temp );
}
}
});イベント関数の第二引数に、移動した要素のjQueryオブジェクトが返ってきます。
// 並び替えた要素を取得
var $tr = ui.item[0];そのオブジェクトからどのデータかを判定します。
最初のtdにＩＤが設定されているのでそのＩＤを取得し、
// 最初のtdにidが書き込まれている
var $td_Id = $tr.children("td:eq(0)");
var id = $td_Id.text();データの何番目に存在するか検索します。
// 元データのどこにあったか検索し、発見したら並び替え
for( var i = 0 ; i < data.length ; ++i ){
var rData = data[i];
if( rData.id != id ) continue;
...
}データが発見できたら、そのデータを並び替えるだけです。
// 配列データの並び替え
var temp = rData;
data.splice( i, 1 );
data.splice( $tr.index(), 0, temp );
イベントに関して省略しましたが、
start, stop, beforeStop, changeとかがあれば十分でしょう。
次回更新時は、別々のテーブルとの入れ替えを説明します。
その際に各種イベントを使用する事になります。
今回はここまでです。