Ajax sortable 拖曳排序

Javascript

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'></script>
 
<script>
    $(document).ready(function () {
        $(".sort").sortable({
            opacity: 0.6,   
            cursor: 'pointer',  
            axis: 'y',       //垂直拖曳 'X' 水平拖曳
            update: function () {
            $("input#test-log").val($('.sort').sortable('serialize'));
        }
               
        });
 
    });
</script>

Html

區分表格標籤 <thead> <tbody> <tfoot>

<table width="100%" border="0" class="list_table">
<tbody class="sort">
<tr>
<td align="center"><input type="checkbox" name="c1"> 1</td>
<td align="center">管理者</td>
<td align="center">admin</td>
<td align="center"><span class="time">2014/5/1 <br>上午 10:02:22</span></td>
<td align="center"><input name="" type="button" value="編輯" onclick="window.location.href='groups_edit.aspx'"/> | <input name="" type="button" value="刪除" onclick="window.location.href='#'"/></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="c1"> 2</td>
<td align="center">員工</td>
<td align="center">admin</td>
<td align="center"><span class="time">2014/5/1 <br>上午 10:02:22</span></td>
<td align="center"><input name="" type="button" value="編輯" onclick="window.location.href='groups_edit.aspx'"/> | <input name="" type="button" value="刪除" onclick="window.location.href='#'"/></td>
</tr>
</tbody>
</table>