一个th下边有两列的话可行吗？

可以的，只需要稍作修改即可。下面是一个修改后的示例代码：

HTML:

<table id="myTable">
  <thead>
    <tr>
      <th>编号</th>
      <th>
        <div>姓名</div>
        <div>（拼音）</div>
      </th>
      <th>
        <div>年龄</div>
        <div>（岁）</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>
        <div>张三</div>
        <div>zhāng sān</div>
      </td>
      <td>
        <div>18</div>
        <div>shí bā suì</div>
      </td>
    </tr>
    <tr>
      <td>002</td>
      <td>
        <div>李四</div>
        <div>lǐ sì</div>
      </td>
      <td>
        <div>20</div>
        <div>èr shí suì</div>
      </td>
    </tr>
    <tr>
      <td>003</td>
      <td>
        <div>王五</div>
        <div>wáng wǔ</div>
      </td>
      <td>
        <div>22</div>
        <div>èr shí èr suì</div>
      </td>
    </tr>
  </tbody>
</table>

JavaScript:

// 获取table元素和thead元素
var table = document.getElementById('myTable');
var thead = table.querySelector('thead');

// 给thead元素添加mousedown事件监听器
thead.addEventListener('mousedown', function(e) {
  // 如果点击的是th元素或其内部的div元素
  if (e.target.tagName === 'TH' || e.target.tagName === 'DIV') {
    // 获取当前点击的th元素或其内部的div元素的索引
    var thIndex = Array.prototype.indexOf.call(e.target.parentNode.parentNode.children, e.target.parentNode);
    // 获取当前点击的是th元素还是div元素
    if (e.target.tagName === 'TH') {
      var isTh = true;
    } else {
      var isTh = false;
    }
    // 给table元素添加mousemove事件监听器
    table.addEventListener('mousemove', moveHandler);
    // 给table元素添加mouseup事件监听器
    table.addEventListener('mouseup', upHandler);
  }

  // 定义moveHandler函数
  function moveHandler(e) {
    // 如果鼠标移动到了th元素或其内部的div元素上
    if (e.target.tagName === 'TH' || e.target.tagName === 'DIV') {
      // 获取当前移动的th元素或其内部的div元素的索引
      var targetIndex = Array.prototype.indexOf.call(e.target.parentNode.parentNode.children, e.target.parentNode);
      // 如果当前移动的th元素或其内部的div元素和之前点击的th元素或其内部的div元素不同
      if (targetIndex !== thIndex) {
        // 获取tbody元素
        var tbody = table.querySelector('tbody');
        // 获取所有tr元素
        var rows = tbody.querySelectorAll('tr');
        // 遍历所有tr元素，交换两个th元素或其内部的div元素所在列的内容
        for (var i = 0; i < rows.length; i++) {
          var row = rows[i];
          var cells = row.querySelectorAll('td');
          var temp = cells[thIndex].innerHTML;
          cells[thIndex].innerHTML = cells[targetIndex].innerHTML;
          cells[targetIndex].innerHTML = temp;
        }
        // 交换两个th元素或其内部的div元素的位置
        if (isTh) {
          var temp = e.target.outerHTML;
          e.target.outerHTML = e.target.parentNode.parentNode.children[thIndex].outerHTML;
          e.target.parentNode.parentNode.children[thIndex].outerHTML = temp;
        } else {
          var temp = e.target.parentNode.outerHTML;
          e.target.parentNode.outerHTML = e.target.parentNode.parentNode.parentNode.children[thIndex].outerHTML;
          e.target.parentNode.parentNode.parentNode.children[thIndex].outerHTML = temp;
        }
        // 更新thIndex
        thIndex = targetIndex;
        // 更新isTh
        isTh = !isTh;
      }
    }
  }

  // 定义upHandler函数
  function upHandler(e) {
    // 移除mousemove和mouseup事件监听器
    table.removeEventListener('mousemove', moveHandler);
    table.removeEventListener('mouseup', upHandler);
  }
});

这个例子中，我们给表格的thead元素添加了一个mousedown事件监听器，在其中记录了当前点击的th元素或其内部的div元素的索引和当前点击的是th元素还是div元素，然后给table元素添加了mousemove和mouseup事件监听器，用来处理列的拖拽过程。当鼠标移动到另一个th元素或其内部的div元素上时，我们交换了两个th元素或其内部的div元素所在列的内容，并交换了两个th元素或其内部的div元素的位置。注意，在交换div元素的位置时，我们需要同时交换其所在的th元素的位置，以保证拖拽效果的正确性。