先上代碼：
<!DOCTYPE html>
<!-- saved from url=(0046)http://www.testbj.com/admin.php/admin/category -->
<html style="min-height: 875px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body class="skin-blue pace-done" style="min-height: 875px;">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table class="table table-striped table-bordered mt24">
<caption></caption>
<thead>
<tr>
<th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">分類</th>
<th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">0</th>
<th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">1</th>
<th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">2</th>
<th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">3</th>
</tr>
</thead>
<tbody class="tcontent ui-sortable">
<tr class="rcontent" name="11" value="2" type="0">
<td rowspan="$rowspan" class="update tdsort0" name="2" style="vertical-align: middle;text-align: center;"><div>
分類一</div></td>
<td rowspan="$rowspan" class="update tdsort1" attr="2" name="6" value="10" style="vertical-align: middle;text-align: center;"><div>張三1</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="2" name="4" value="9" style="vertical-align: middle;text-align: center;"><div>李四1</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="2" name="5" value="8" style="vertical-align: middle;text-align: center;"><div>王五1</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="2" name="9" value="7" style="vertical-align: middle;text-align: center;"><div>趙六1</div>
</td>
</tr>
<tr class="rcontent" name="10" value="14" type="0">
<td rowspan="$rowspan" class="update tdsort0" name="14" style="vertical-align: middle;text-align: center;"><div>
分類二</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="14" name="16" value="11" style="vertical-align: middle;text-align: center;"><div>張三2</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="14" name="17" value="10" style="vertical-align: middle;text-align: center;"><div>李四2</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="14" name="18" value="9" style="vertical-align: middle;text-align: center;"><div>王五2</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="14" name="19" value="8" style="vertical-align: middle;text-align: center;"><div>趙六2</div>
</td>
</tr>
<tr class="rcontent" name="9" value="27" type="0">
<td rowspan="$rowspan" class="update tdsort0" name="27" style="vertical-align: middle;text-align: center;"><div>
分類三</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="27" name="29" value="9" style="vertical-align: middle;text-align: center;"><div>張三3</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="27" name="30" value="8" style="vertical-align: middle;text-align: center;"><div>李四3</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="27" name="31" value="7" style="vertical-align: middle;text-align: center;"><div>王五3</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="27" name="32" value="6" style="vertical-align: middle;text-align: center;"><div>趙六3</div>
</td>
</tr>
<tr class="rcontent" name="8" value="38" type="0">
<td rowspan="$rowspan" class="update tdsort0" name="38" style="vertical-align: middle;text-align: center;"><div>
分類四</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="38" name="40" value="7" style="vertical-align: middle;text-align: center;"><div>張三4</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="38" name="41" value="6" style="vertical-align: middle;text-align: center;"><div>李四4</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="38" name="42" value="5" style="vertical-align: middle;text-align: center;"><div>王五4</div>
</td>
<td rowspan="$rowspan" class="update tdsort1" attr="38" name="43" value="4" style="vertical-align: middle;text-align: center;"><div>趙六4</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- jQuery 2.0.2 -->
<script src="./jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI 1.10.3 -->
<script src="./jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.tdsort1').mousedown(function(event) {
$(this).parent().sortable({cancel:function() {
}});
$('.rcontent').sortable({
axis : 'x',
items: "td", //只是tr可以拖動
revert : true,
update : function(event, ui) {
// ==== 一系列操作 ====
// alert('移動成功！');
// window.location.reload();
}
})
})
$('.tdsort1').mouseup(function() {
$(".tcontent").sortable("enable");
})
$(".tcontent").sortable({
cursor: "move",
items: "tr", //只是tr可以拖動
opacity: 0.6, //拖動時，透明度爲0.6
revert: true, //釋放時，增加動畫
update: function(event, ui) { //更新排序之後
// ==== 一系列操作 ====
// alert('移動成功！');
// window.location.reload();
}
});
$(".tcontent").disableSelection();
})
</script>
</body></html>沒什麼樣式，將就着看，知道原理就好
該效果主要是使用jQueryUI這個插件來實現的，那必須的，你需要先下載<script src="./jquery-ui-1.10.3.min.js" type="text/javascript"></script>這個東西
具體的實現看上面js代碼
測試過的朋友可能會有這樣的疑問：
你這個不行啊，一旦移動td後，tr就移動不了了
我們看會代碼，tr的移動和td的移動是兩個動作，沒完成一個動作，我們需要恢復動作觸發前的狀態，這樣，下個動作的操作就不會受上一個動作的影響
所以答案是，當我們觸發一個動作，完成一系列操作後，然後給頁面刷新一下，這樣，我們觸發下一個動作是完全不會被影響的
我們做這個移動效果，說白了就是想換個方式進行排序，這樣就行了