JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<table id="my-table">
  <tr draggable="true" class="table-cell" id="1">
    <td>How</td>
  </tr>
  <tr draggable="true" class="table-cell" id="2">
    <td>Are</td>
  </tr>
  <tr draggable="true" class="table-cell" id="3">
    <td>You</td>
  </tr>
</table>

JavaScript

function addDragEvents(element) {
  element.addEventListener("dragstart",start);
  element.addEventListener("dragover",dragover);
  element.addEventListener("drop",drop);
}

function start(){  
  row = event.target; 
}
function dragover(){
  var e = event;
  e.preventDefault(); 
  
  let children= Array.from(e.target.parentNode.parentNode.children);
  
  if(children.indexOf(e.target.parentNode)>children.indexOf(row))
    e.target.parentNode.after(row);
  else
    e.target.parentNode.before(row);
}

function drop(){
    var arr = {};
    var rows = document.getElementById('my-table').getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
      arr[i]={ id: rows[i].id, order: rows[i].rowIndex+1 };
    }
	console.log(arr);
}

let cells = document.getElementsByClassName('table-cell'),
		row;
for (let cell of cells) {
  addDragEvents(cell);
}