您好！要在页面上创建简单的拖动排序表格，可以使用HTML、CSS和JavaScript编写代码。以下是一个简单的实现方法：
HTML代码：
<table id="myTable">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>18</td>
</tr>
</tbody>
</table>CSS代码：
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 5px;
}
tr.dragging {
opacity: 0.5;
}JavaScript代码：
// 获取表格和tbody元素
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
// 获取所有行元素
var rows = tbody.getElementsByTagName("tr");
// 给每个行元素添加拖动事件
for (var i = 0; i < rows.length; i++) {
rows[i].addEventListener("dragstart", function (event) {
// 设置拖动数据
event.dataTransfer.setData("text/plain", event.target.id);
// 设置拖动时的样式
event.target.classList.add("dragging");
});
rows[i].addEventListener("dragend", function (event) {
// 清除拖动时的样式
event.target.classList.remove("dragging");
});
// 设置行元素为可拖动
rows[i].setAttribute("draggable", true);
}
// 给tbody元素添加拖放事件
tbody.addEventListener("dragover", function (event) {
// 阻止默认行为
event.preventDefault();
// 设置拖放的效果为移动
event.dataTransfer.dropEffect = "move";
});
tbody.addEventListener("drop", function (event) {
// 阻止默认行为
event.preventDefault();
// 获取拖动的数据
var sourceId = event.dataTransfer.getData("text/plain");
var sourceRow = document.getElementById(sourceId);
// 获取目标行的位置
var targetRow = event.target;
while (targetRow.tagName != "TR") {
targetRow = targetRow.parentNode;
}
// 将拖动的行插入到目标行的前面
tbody.insertBefore(sourceRow, targetRow);
});在上述代码中，我们给每个行元素添加了拖动事件，使得它们可以被拖动。在拖动开始时，我们设置了拖动数据和拖动时的样式；在拖动结束时，我们清除了拖动时的样式。同时，我们给tbody元素添加了拖放事件，允许在其中进行拖放操作。在拖放过程中，我们阻止了默认行为，设置了拖放的效果为移动，并获取了拖动的数据和目标行的位置，最后将拖动的行插入到目标行的前面。
您可以将以上代码复制到一个HTML文件中，用浏览器打开它，即可看到一个简单的拖动排序表格。希望能对您有所帮助！