如何使用JavaScript实现简单的表格拖拽排序功能

在开发web应用程序时，经常会遇到需要对表格进行拖拽排序的需求。这样的功能可以让用户通过拖拽表格的行来改变它们在页面上的顺序。本文将介绍如何使用JavaScript实现一个简单的表格拖拽排序功能。

准备工作

HTML结构

首先，我们需要有一个包含表格的HTML页面。以下是一个简单的例子：

<div id="tableContainer">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</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>
</div>

CSS样式

我们还需要一些CSS样式来设置表格的样式和拖拽排序的效果。

#tableContainer {
  width: 500px;
  overflow-y: auto;
  height: 300px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid #ccc;
}

tr.dragging {
  background-color: #f9f9f9;
  opacity: 0.6;
}

实现功能

获取表格行的数据

首先，我们需要通过JavaScript获取表格中每一行的数据。我们可以使用querySelectorAll方法来获取所有的行元素，并使用Array.from方法将其转换为数组。

const rows = Array.from(document.querySelectorAll('#tableContainer table tbody tr'));

添加拖拽事件监听器

接下来，我们需要为每一行添加拖拽事件监听器，以便用户可以通过拖拽来改变行的顺序。我们可以使用addEventListener方法来为每一行添加监听器。

rows.forEach(row => {
  row.addEventListener('dragstart', handleDragStart);
  row.addEventListener('dragover', handleDragOver);
  row.addEventListener('drop', handleDrop);
  row.setAttribute('draggable', true);
});

实现拖拽事件处理函数

添加了监听器之后，我们需要实现相应的事件处理函数来处理拖拽事件：

let draggingRow = null;

function handleDragStart(event) {
  event.target.classList.add('dragging');
  draggingRow = event.target;
}

function handleDragOver(event) {
  event.preventDefault();
}

function handleDrop(event) {
  if (event.target.tagName === 'TR' && draggingRow !== null) {
    const targetRow = event.target;

    // 获取被拖拽行在数组中的索引
    const draggingIndex = rows.indexOf(draggingRow);
    // 获取目标行在数组中的索引
    const targetIndex = rows.indexOf(targetRow);

    // 在数组中交换两行的位置
    rows.splice(draggingIndex, 1);
    rows.splice(targetIndex, 0, draggingRow);

    // 更新表格
    rows.forEach(row => {
      row.classList.remove('dragging');
      row.removeEventListener('dragstart', handleDragStart);
      row.removeEventListener('dragover', handleDragOver);
      row.removeEventListener('drop', handleDrop);
    });

    rows.forEach(row => {
      row.addEventListener('dragstart', handleDragStart);
      row.addEventListener('dragover', handleDragOver);
      row.addEventListener('drop', handleDrop);
    });

    const tableBody = document.querySelector('#tableContainer table tbody');
    while (tableBody.firstChild) {
      tableBody.removeChild(tableBody.firstChild);
    }
    rows.forEach(row => tableBody.appendChild(row));
  }
}

初始化拖拽排序功能

最后，我们需要在页面加载完成时初始化拖拽排序功能。

document.addEventListener('DOMContentLoaded', () => {
  // 初始化排序功能
  rows.forEach(row => {
    row.addEventListener('dragstart', handleDragStart);
    row.addEventListener('dragover', handleDragOver);
    row.addEventListener('drop', handleDrop);
    row.setAttribute('draggable', true);
  });
});

结论

通过上述步骤，我们成功地实现了一个简单的表格拖拽排序功能。用户现在可以通过拖拽表格的行来改变它们在页面上的顺序。如果你希望在这个基础上进一步扩展功能，你可以探索更多的拖拽排序效果，例如动画效果或拖拽时的即时预览等。

希望这篇文章对你有所帮助，祝你在使用JavaScript实现表格拖拽排序功能方面有所收获！

本文来自极简博客，作者：紫色玫瑰，转载请注明原文链接：如何使用JavaScript实现简单的表格拖拽排序功能