JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<table>
<thead>
 <tr>  
  <th>EMAIL</th>
 </tr>
</thead>
<tbody>
 <tr draggable="true" ondragstart="start()"  ondragover="dragover()">  
  <td>[email protected]</td><td>[email protected]</td><td>[email protected]</td>
 </tr>
 <tr draggable="true" ondragstart="start()" ondragover="dragover()">  
  <td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
 </tr>
 <tr draggable="true" ondragstart="start()" ondragover="dragover()">  
  <td>[email protected]</td><td>[email protected]</td><td>[email protected]</td>
 </tr>
</tbody>
</table>

CSS

body{
 color:black;
 font-size:25px;
}
td,tr,th{
 border:1px solid black;
 border-collapse: collapse;
 cursor:all-scroll;
}
table{
 border-collapse: collapse;
 -webkit-user-select: none; /* Safari */
 -ms-user-select: none; /* IE 10+ and Edge */
 user-select: none; /* Standard syntax */
 margin:0 auto;
}

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);
}