如何用CSS实现表格列可拖拽移动 无需安装第三方库

无需引入完整第三方库，仅借助原生HTML5 Drag & Drop API加几十行JS代码即可实现需求，具体实现逻辑如下：

核心实现步骤 #

• 给所有表头<th>元素添加draggable="true"属性，开启原生拖拽能力
• 绑定三个核心拖拽事件：
  • dragstart：记录当前被拖拽的列索引
  • dragover：阻止默认事件，允许当前位置作为拖拽释放目标，同时记录目标列索引
  • drop：触发列交换逻辑，同步重排表头和所有表格行的对应单元格顺序

可直接运行的示例代码 #

<table id="dragTable">
  <thead>
    <tr>
      <th draggable="true">姓名</th>
      <th draggable="true">年龄</th>
      <th draggable="true">职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>开发工程师</td>
    </tr>
  </tbody>
</table>

let draggedColIndex = null;
const table = document.getElementById('dragTable');
const headers = table.querySelectorAll('th');

headers.forEach((header, index) => {
  // 记录拖拽起始列索引
  header.addEventListener('dragstart', () => {
    draggedColIndex = index;
  });

  // 允许拖拽到当前表头位置
  header.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  // 释放时完成列交换
  header.addEventListener('drop', (e) => {
    e.preventDefault();
    const targetColIndex = index;
    if (draggedColIndex === targetColIndex) return;

    // 遍历所有行同步交换对应位置单元格
    const rows = table.querySelectorAll('tr');
    rows.forEach(row => {
      const draggedCell = row.children[draggedColIndex];
      const targetCell = row.children[targetColIndex];
      if (draggedColIndex < targetColIndex) {
        targetCell.after(draggedCell);
      } else {
        targetCell.before(draggedCell);
      }
    });
    draggedColIndex = null;
  });
});

可选优化项 #

• 拖拽过程中给被拖拽的表头添加拖拽中的自定义样式，提升交互感知
• 加入拖拽位置的占位提示线，更直观展示列交换后的效果
• 如果需要持久化列顺序，拖拽完成后把当前列顺序存储到localStorage即可

内容的提问来源于stack exchange，提问作者caboosh