Перетаскивать целые столбцы таблицы в простой Javascript (Ваниль JS)? - PullRequest
Новая
       63

Перетаскивать целые столбцы таблицы в простой Javascript (Ваниль JS)?

0 голосов
/ 16 февраля 2020

У меня есть эта скрипка: https://jsfiddle.net/n9epsy5x/2/

У меня есть перетаскивание, работающее для заголовков столбцов, но я хотел бы, чтобы весь столбец заголовка перемещался при перетаскивании и сбросив заголовок. Как я могу выполнить это простым Javascript (Vanilla JS)?

Я попытался добавить классы в заголовки таблицы и сопутствующие элементы столбца, чтобы иметь возможность нацеливать элементы столбца, чтобы заставить их двигаться, но я не мог заставить это работать.

Любая помощь будет принята с благодарностью. Спасибо! 

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>
...