合并单元格时要怎么处理？

当表格中存在合并单元格时，拖拽列排序需要特殊处理。

首先，需要判断当前拖拽的列是否会影响到合并单元格的范围。如果当前列的左右两侧存在被合并的单元格，那么拖拽列排序时，需要同时改变这些被合并的单元格范围。

其次，当表格中存在被合并的单元格时，需要在拖拽过程中限制占位符单元格的位置，避免占位符单元格跨越合并单元格的范围，导致表格显示异常。

以下是修改后的代码示例：

<table>
  <thead>
    <tr>
      <th colspan="2" 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 rowspan="2">1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</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';
    var nextCell = null;
    for (var i = 0; i < dragCell.parentNode.children.length; i++) {
      var cell = dragCell.parentNode.children[i];
      if (cell !== dragCell && cell.getBoundingClientRect().left < event.clientX) {
        nextCell = cell.nextSibling;
      }
    }
    if (nextCell === null) {
      nextCell = dragCell.parentNode.children[dragCell.parentNode.children.length - 1].nextSibling;
    }
    if (nextCell !== null && nextCell !== placeholderCell.nextSibling) {
      // 检查是否会影响到合并单元格的范围
      var colSpan = parseInt(dragCell.getAttribute('colspan') || '1');
      var nextColSpan = parseInt(nextCell.getAttribute('colspan') || '1');
      var rowSpan = parseInt(dragCell.getAttribute('rowspan') || '1');
      var nextRowSpan = parseInt(nextCell.getAttribute('rowspan') || '1');
      var colStart = 0;
      var colEnd = 0;
      var nextColStart = 0;
      var nextColEnd = 0;
      var rowStart = 0;
      var rowEnd = 0;
      var nextRowStart = 0;
      var nextRowEnd = 0;
      var col = 0;
      for (var i = 0; i < dragCell.parentNode.children.length; i++) {
        var cell = dragCell.parentNode.children[i];
        if (cell === dragCell) {
          colStart = col;
          colEnd = col + colSpan - 1;
        }
        if (cell === nextCell) {
          nextColStart = col;
          nextColEnd = col + nextColSpan - 1;
        }
        if (col <= colEnd && col >= colStart) {
          rowStart = rowEnd + 1;
          rowEnd = rowStart + rowSpan - 1;
        }
        if (col <= nextColEnd && col >= nextColStart) {
          nextRowStart = nextRowEnd + 1;
          nextRowEnd = nextRowStart + nextRowSpan - 1;
        }
        col += parseInt(cell.getAttribute('colspan') || '1');
      }
      if (nextRowStart <= rowEnd || nextRowEnd >= rowStart) {
        return;
      }
      dragCell.parentNode.insertBefore(placeholderCell, nextCell);
    }
  }
  
  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>

注意，合并单元格的处理需要根据具体情况进行调整，以上代码仅供参考。