JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<table>
	<thead>
			<td>Cell1</td>
			<td>Cell2</td>
			<td>Cell3</td>
	</thead>
	<tbody id="ordonable">
		<tr><td>001</td><td>001</td><td>001</td></tr>
		<tr></tr>
		<tr><td>002</td><td>002</td><td>002</td></tr>
		<tr><td>003</td><td>003</td><td>003</td></tr>
		<tr><td>004</td><td>004</td><td>004</td></tr>		
	</tbody>
</table>

  <script src="sort.js"></script>

CSS

table{
  width: 300px;
  margin: 50px auto;
  border-collapse: collapse;
  text-align: center;
}
table thead td {
  background-color: #CCC;
  font-weight: bold;
}

table, td{
  border: 1px solid black;
}
.dragstart{background-color: #CCC;}

JavaScript

var cible;

var noeud = document.querySelector('#ordonable'),
	enf = noeud.childNodes,
    thead = noeud.parentElement.children[0],
    lastDropZone = null, //Ligne vierge où il y a possibilité de drop
    lastRowIndex = -1;


for (var i = enf.length -1; i > -1; i--) {
	bloc = enf[i];
		// on parcours tous les noeud et on supprime les noeuds enfants vides
	if(bloc.nodeName ==='#text') {
		noeud.removeChild(bloc);
	}
	else{
		// on rend le bloc draggable
		draggable(bloc);
	}
}




function draggable(bloc) {
  bloc.draggable = true;
  bloc.addEventListener('dragstart', function(event){
  
	cible = event.target;
	event.dataTransfer.setData('text/plain', cible.innerText || cible.textContent);
	event.dataTransfer.effectAllowed = "move";

	cible.classList.add('dragstart');
	console.log(bloc);
	
  }, false);

  bloc.addEventListener('dragover', function(event){
  	event.preventDefault();
    var RowIndex = this.rowIndex > enf.length ? enf.length : this.rowIndex;
    if(RowIndex !== lastRowIndex){
    	if(lastDropZone){
        	lastDropZone.remove();
        }
        var newRow = noeud.insertRow(RowIndex);
        var newCell = newRow.insertCell(0);
        newCell.colSpan = 3;
        newCell.innerHTML = "Drop zone";
        lastDropZone = newRow;
        lastRowIndex = RowIndex;
    }

  }, false);
    
    thead.addEventListener('dragover', function(event){
  	event.preventDefault();
    var RowIndex = 0;
    if(RowIndex !== lastRowIndex){
    	if(lastDropZone){
        	lastDropZone.remove();
        }
        var newRow = noeud.insertRow(RowIndex);
        var newCell = newRow.insertCell(0);
        newCell.colSpan = 3;
        newCell.innerHTML = "Drop zone";
        lastDropZone = newRow;
        lastRowIndex = RowIndex;
    }

  }, false);



  bloc.addEventListener('dragenter', function(event){
  	
  	RowIndex = this.rowIndex; console.log(RowIndex);
  	bloc.style.backgroundColor  = "#EEE";


  }, false);

  bloc.addEventListener('dragleave', function(event){
...