JSFiddle - React, Tailwind, and code Playground

by benoit merckx

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;


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

  }, false);



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


  }, false);

  bloc.addEventListener('dragleave', function(event){
  	bloc.style.backgroundColor  = "#FFF";
  	;
  }, false);

  bloc.addEventListener('drop', function(event){
  	event.preventDefault();
    noeud.insertBefore(cible,this);
  	bloc.style.backgroundColor  = '#FFF';
  	bloc.classList.remove('dragstart');
  }, false);


  bloc.addEventListener('dragend',function(event){
  	cible.classList.remove('dragstart');

  }, false);

}