テーブルの表などで順番変更し、フォーム送信により順番を保存したい場合、jQueryUIを利用してブラウザ画面で行をドラッグし別の位置にずらした場合、その動作を感知してinputのvalue値を変化させるというもの。
行ごとにinput hiddenでclass=”rank”を用意し、順番の情報を格納する。
$(function(){
$('#sortable').sortable();
$('#sortable').disableSelection();
$('#sortable').bind('sortstop', function (e, ui) {
// ソートが完了したら実行される。
var rows = $('#sortable .rank');
for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
$($('.rank')[i]).val(i + 1);
}
})
})
行を動かすとJSが発動し、各行の.rank値を変更する。これをPOSTしてDBの情報を更新する。