在 Web 開發中，表格是非常常見的一種元素。而 jQuery 可以幫助我們簡單地實現表格的行可拖拽效果。下面我們將簡單介紹一下如何使用 jQuery 實現這個功能。

// HTML 代碼結構
<table>
<thead>
<tr>
<th>標題 1</th>
<th>標題 2</th>
<th>標題 3</th>
<th>標題 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>內容 1</td>
<td>內容 2</td>
<td>內容 3</td>
<td>內容 4</td>
</tr>
<tr>
<td>內容 5</td>
<td>內容 6</td>
<td>內容 7</td>
<td>內容 8</td>
</tr>
<tr>
<td>內容 9</td>
<td>內容 10</td>
<td>內容 11</td>
<td>內容 12</td>
</tr>
</tbody>
</table>
// JS 代碼
$(function() {
var $tbody = $('table tbody');
$tbody.sortable({
helper: function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
},
axis: 'y',
opacity: 0.8,
start: function(e, ui) {
ui.placeholder.html('<td colspan=4></td>');
ui.item.children().css('visibility', 'hidden');
},
stop: function(e, ui) {
ui.item.children().css('visibility', 'visible');
}
});
});

代碼中的<tbody>用 jQuery 的sortable()方法添加了行可拖拽效果。其中的helper參數指定了拖拽時的樣式，axis參數指定了拖拽的方向，opacity參數指定了拖拽時元素的透明度，start和stop參數分別在拖拽開始和結束時觸發相應的事件處理函數。

通過這樣的代碼實現，我們可以非常方便地為表格添加可拖拽行的效果。