線上書籍

一、官網

1.http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

二、Js部份

<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='jquery.tablednd_0_5.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
    $('#tbl').tableDnD();
});
</script>

三、表單及表格部份

<form action='index.php' method='post'>
    <table id='tbl'>
        <tbody>
        <tr id='1'><td><input type='hidden' name='new_sort[1]'></td></tr>
        <tr id='2'><td><input type='hidden' name='new_sort[2]'></td></tr>
        <tr id='n'><td><input type='hidden' name='new_sort[n]'></td></tr>
        </tbody>
    </table>
    <input type='hidden' name='op' value='save_sort'>
    <input type='submit' value='儲存排序'>
</form>

四、儲存排序

if($_POST['op']=="save_sort"){
  $sort=1;
  foreach($_POST['new_sort'] as $sn => $v){
    $sql = "update 資料表 set `排序欄位` = '{$sort}' where 流水號='$sn'";
    mysql_query($sql);
    $sort++;
  }
}

五、移動列變色

<style>
  .myDragClass {  color: yellow;  background-color: black;}
</style>
$('#tbl').tableDnD({
    onDragClass:"myDragClass"
});

六、移動後秀出儲存按鈕

$('#tbl').tableDnD({
    onDragClass:"myDragClass" ,
    onDragStart: function(table) {
        $("#saveArea").html("<input type='hidden' name='op' value='save'><input type='submit' value='儲存'>");
    }
});
<div id="saveArea" style="text-align:center;"></div>