JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<table id="my_table">
<thead>
 <tr>  
  <th>EMAIL</th>
 </tr>
</thead>
<tbody>
 <tr id="1" draggable='true' ondragstart='start()'  ondragover='dragover()' ondrop='drop()'>  
  <td>[email protected]</td>
 </tr>
 <tr id="2" draggable='true' ondragstart='start()' ondragover='dragover()' ondrop='drop()'>  
  <td>[email protected]</td>
 </tr>
 <tr id="3" draggable='true' ondragstart='start()' ondragover='dragover()' ondrop='drop()'>  
  <td>[email protected]</td>
 </tr>
 <tr id="4" draggable='true' ondragstart='start()' ondragover='dragover()' ondrop='drop()'>  
  <td>[email protected]</td>
 </tr>
 <tr id="5" draggable='true' ondragstart='start()' ondragover='dragover()' ondrop='drop()'>  
  <td>[email protected]</td>
 </tr>
</tbody>
</table>

JavaScript

var row;

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('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
      arr[i]={ id: rows[i].id, order: rows[i].rowIndex };
    }
	console.log(arr);
}