自定义表头拖拽上下移动代码实现

以下是一个简单的实现：

HTML部分，使用table标签创建表格，并设置表头：

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

CSS部分，使用CSS样式设置表格样式及拖拽时的样式：

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

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

th.dragging {
  background-color: #ccc;
}

th.drop {
  background-color: #aaa;
}

JavaScript部分，使用原生JavaScript实现拖拽功能：

// 获取所有表头
const headers = document.querySelectorAll('th');

// 遍历表头，为每个表头添加拖拽事件
headers.forEach(header => {
  header.draggable = true;

  // 当拖拽开始时，添加dragging类，并设置数据
  header.addEventListener('dragstart', e => {
    e.target.classList.add('dragging');
    e.dataTransfer.setData('text/plain', e.target.innerHTML);
  });

  // 当拖拽结束时，移除dragging类
  header.addEventListener('dragend', e => {
    e.target.classList.remove('dragging');
  });

  // 当拖拽进入其他表头时，添加drop类
  header.addEventListener('dragenter', e => {
    e.target.classList.add('drop');
  });

  // 当拖拽离开其他表头时，移除drop类
  header.addEventListener('dragleave', e => {
    e.target.classList.remove('drop');
  });

  // 当拖拽在其他表头上松开时，交换表头的位置
  header.addEventListener('drop', e => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    const target = e.target.innerHTML;
    e.target.innerHTML = data;
    e.target.classList.remove('drop');

    headers.forEach(header => {
      if (header.innerHTML === data) {
        header.innerHTML = target;
      }
    });
  });
});

通过以上代码，就可以实现自定义表头的拖拽上下移动功能