Drag and drop whole table columns in plain Javascript (VanillaJS)?

Question

I have this fiddle: https://jsfiddle.net/n9epsy5x/2/

I've got drag and drop working for the column headers, but I'd like a header's whole column to move when dragging and dropping the header. How can I pull this off in plain Javascript (VanillaJS)?

I tried adding classes to the table headers and accompanying column elements to be able to target the column elements to get them to move, but I couldn't get that to work.

Any help would be greatly appreciated. Thanks!

var source;

function isbefore(a, b) {
  if (a.parentNode == b.parentNode) {
    for (var cur = a; cur; cur = cur.previousSibling) {
      if (cur === b) {
        return true;
      }
    }
  }
  return false;
}

function dragenter(e) {
  var targetelem = e.target;
  if (targetelem.nodeName == "TD") {
    targetelem = targetelem.parentNode;
  }

  if (isbefore(source, targetelem)) {
    targetelem.parentNode.insertBefore(source, targetelem);
  } else {
    targetelem.parentNode.insertBefore(source, targetelem.nextSibling);
  }
}

function dragstart(e) {
  source = e.target;
  e.dataTransfer.effectAllowed = 'move';
}

[draggable] {
  user-select: none;
}

body {
  background-color: #fff;
  color: #303;
  font-family: sans-serif;
  text-align: center;
}

li {
  border: 2px solid #000;
  list-style-type: none;
  margin: 2px;
  padding: 5px;
}

ul {
  margin: auto;
  text-align: center;
  width: 25%;
}

<table>
  <thead>
    <tr>
      <th ondragstart="dragstart(event)" ondragenter="dragenter(event)" draggable="true">
        Column 1
      </th>
      <th ondragstart="dragstart(event)" ondragenter="dragenter(event)" draggable="true">
        Column 2
      </th>
      <th ondragstart="dragstart(event)" ondragenter="dragenter(event)" draggable="true">
        Column 3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>hhgr</td>
      <td>ffrr</td>
      <td>qedf</td>
    </tr>
    <tr>
      <td>wdfe</td>
      <td>cjnb</td>
      <td>cdke</td>
    </tr>
    <tr>
      <td>awjb</td>
      <td>cdjk</td>
      <td>ijfe</td>
    </tr>
  </tbody>
</table>