云主机测评网HTML拖放可排序表格是一种常见的网页交互效果，它可以让用户通过拖拽表格行来改变它们的顺序，这种效果在很多场景下都非常实用，比如任务管理、商品排序等，本文将详细介绍如何使用HTML和JavaScript实现一个拖放可排序的表格。
（图片来源网络，侵删）我们需要创建一个HTML表格，并为其添加一些基本的样式，以下是一个简单的HTML表格示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>拖放可排序表格</title>
<style>
table {
width: 100%;
bordercollapse: collapse;
}
th, td {
padding: 8px;
textalign: left;
borderbottom: 1px solid #ddd;
}
th {
backgroundcolor: #f2f2f2;
cursor: pointer;
}
</style>
</head>
<body>
<table id="sortableTable">
<thead>
<tr>
<th onclick="sortTable(0)">姓名</th>
<th onclick="sortTable(1)">年龄</th>
<th onclick="sortTable(2)">城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</tbody>
</table>
<script src="sortable.js"></script>
</body>
</html>
接下来，我们需要编写JavaScript代码来实现拖放功能，以下是一个简单的JavaScript实现：
// sortable.js
document.addEventListener('DOMContentLoaded', function () {
var table = document.getElementById('sortableTable');
var dragSrcEl = null;
var dropElem = null;
var dropRowIndex = null;
var dropColIndex = null;
var dragOverElem = null;
var dragOverRowIndex = null;
var dragOverColIndex = null;
var currentSortColumn = null;
var currentSortOrder = 'asc'; // 默认升序排列
var sortedRows = []; // 存储排好序的行数据，用于恢复原始顺序
var originalTableData = []; // 存储原始表格数据，用于恢复原始顺序
var isDragging = false; // 是否正在拖拽中
var isSorting = false; // 是否正在排序中
var sortTimeout = null; // 排序延时器，用于处理点击表头时的排序请求
var sortInterval = 100; // 排序间隔时间，单位：毫秒
var sortFunctions = { // 定义排序函数，可以根据需要自定义排序规则
'asc': function (a, b) { return a b; },
'desc': function (a, b) { return b a; }
};
var sortColumns = ['name', 'age', 'city']; // 定义需要排序的列名，可以根据需要自定义列名列表
var sortColumnMap = {}; // 列名与索引的映射关系，用于快速查找列索引
for (var i = 0; i < sortColumns.length; i++) {
sortColumnMap[sortColumns[i]] = i;
}
for (var i = 0; i < table.rows.length; i++) { // 初始化原始表格数据和排好序的行数据数组
originalTableData[i] = table.rows[i].innerHTML;
sortedRows[i] = table.rows[i].innerHTML;
}
for (var i = 0; i < table.rows.length; i++) { // 为表格的每一行添加拖拽事件监听器和鼠标悬停事件监听器
table.rows[i].draggable = true;
table.rows[i].addEventListener('dragstart', function (e) { // 拖拽开始事件处理函数
dragSrcEl = this;
dragOverElem = e.target; // 记录拖拽目标元素，用于判断是否在目标元素上释放鼠标左键触发drop事件（即拖拽到目标元素上）
if (isSorting) { // 如果正在排序中，则取消排序请求，避免拖拽时触发多次排序请求导致页面卡顿的问题（因为排序请求是通过setTimeout延迟执行的）
clearTimeout(sortTimeout);
isSorting = false; // 重置排序状态为false，表示当前没有正在进行的排序操作了（因为已经取消了之前的排序请求）
} else { // 如果当前没有正在进行的排序操作，则将拖拽状态设置为true，表示当前正在拖拽中（即用户正在拖拽表格行）并触发拖拽开始事件（即调用dragStart函数）
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错，值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布！
我在用这类站群服务器、还可以. 用很多年了。