1. 概述
HTML table鼠标拖拽排序功能通常用于前端开发人员在展示数据时通过可视化的方式触发排序操作，不需要刷新页面。这种交互方式不仅提高了用户体验，而且使得数据的操作变得更加直观和便捷。
在本文中，我们将介绍如何使用jQuery UI库来实现HTML table的鼠标拖拽排序功能。jQuery UI是使用jQuery库构建的用户界面插件库，包含多种UI组件和交互特效，可以轻松实现复杂的交互效果。
2. 实现步骤
2.1 引入jQuery和jQuery UI库文件
首先，需要在HTML文件中引入jQuery和jQuery UI库文件。可以在jQuery官方网站上下载最新版本的库文件，或直接使用CDN引入。
<!-- 引入jQuery和jQuery UI库文件 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
2.2 创建HTML表格
在页面中创建一个包含数据的HTML表格。为了便于排序，表格中应该有一个标识每一行的唯一键，可以用id或data-*属性来实现。
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr data-id="1">
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr data-id="2">
<td>Emily</td>
<td>30</td>
<td>Female</td>
</tr>
<tr data-id="3">
<td>Tom</td>
<td>20</td>
<td>Male</td>
</tr>
</tbody>
</table>
2.3 绑定sortable交互特效
使用jQuery UI库的sortable方法来绑定HTML表格的拖拽排序功能。sortable方法接受一个options对象来配置交互特效，其中包含以下属性：
* axis：指定可拖拽的方向，可以是"x"、"y"或者"xy"。
* containment：指定可拖拽元素的限制范围，默认为文档可视范围。
* cursor：指定拖拽时鼠标的样式。
* tolerance：指定排序时拖拽元素与目标元素之间的距离，可以是"intersect"（默认）、"pointer"或者"fit"。
<script>
$(function() {
$("#myTable tbody").sortable({
axis: "y",
containment: "parent",
cursor: "move",
tolerance: "intersect"
});
});
</script>
3. 实现效果
当页面加载完毕时，就可以点击行并拖拽它们来实现排序了。下面是实现之后的效果图：
4. 总结
本文介绍了如何使用jQuery UI库来为HTML table添加拖拽排序功能。这是一种非常实用的交互方式，不仅可以提高用户体验，而且使得数据的操作变得更加直观和便捷。