colspan="2" 如何实现拖拽列排序

要实现拖拽列排序，你需要使用JavaScript来处理拖拽事件。以下是大致的实现方法：

1. 给表格中每个单元格添加一个事件监听器，监听mousedown，mouseup和mousemove事件。
2. 当用户在表头的单元格上按下鼠标时，记录下当前单元格的列号和位置信息，并且创建一个新的占位符单元格。
3. 当用户移动鼠标时，在占位符单元格后面创建一个虚拟的拖拽线，并且根据鼠标位置改变虚拟线的位置。
4. 当用户在表头的单元格上松开鼠标时，根据占位符单元格的位置信息更新表格中的单元格位置，并且删除占位符单元格和虚拟拖拽线。

以下是一个基本的实现代码示例（仅供参考）：

<table>
  <thead>
    <tr>
      <th onmousedown="startDrag(event, 0)">列1</th>
      <th onmousedown="startDrag(event, 1)">列2</th>
      <th onmousedown="startDrag(event, 2)">列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>

<script>
  var dragCell = null;
  var dragLine = null;
  var placeholderCell = null;
  
  function startDrag(event, col) {
    dragCell = event.target;
    placeholderCell = dragCell.cloneNode(true);
    placeholderCell.style.visibility = 'hidden';
    dragLine = document.createElement('div');
    dragLine.className = 'drag-line';
    document.body.appendChild(dragLine);
    document.body.appendChild(placeholderCell);
    document.addEventListener('mousemove', doDrag);
    document.addEventListener('mouseup', endDrag);
  }
  
  function doDrag(event) {
    dragLine.style.left = event.clientX + 'px';
    placeholderCell.style.left = event.clientX + 'px';
    placeholderCell.style.top = dragCell.offsetTop + 'px';
    for (var i = 0; i < dragCell.parentNode.children.length; i++) {
      var cell = dragCell.parentNode.children[i];
      if (cell !== dragCell && cell.getBoundingClientRect().left < event.clientX) {
        dragCell.parentNode.insertBefore(placeholderCell, cell.nextSibling);
        break;
      }
    }
  }
  
  function endDrag(event) {
    dragCell.parentNode.insertBefore(dragCell, placeholderCell);
    document.body.removeChild(dragLine);
    document.body.removeChild(placeholderCell);
    dragCell = null;
    dragLine = null;
    placeholderCell = null;
    document.removeEventListener('mousemove', doDrag);
    document.removeEventListener('mouseup', endDrag);
  }
</script>

注意，这只是一个基本的实现，还有很多细节需要考虑，例如当表格中存在合并单元格时，需要特殊处理。