JSFiddle - React, Tailwind, and code Playground

HTML

<table>
	<tr>
    	<td id="tblrw1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
        	Some Dummy Text1
        </td>
    </tr>
	<tr>
    	<td  id="tblrw2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
        	Some Dummy Text2        
        </td>
    </tr>
    <tr>
    	<td  id="tblrw3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
        	Some Dummy Text3        
        </td>
    </tr>
    <tr>
    	<td  id="tblrw4" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
        	Some Dummy Text4        
        </td>
    </tr>
</table>

CSS

td
{
	width:500px;
	height:80px;
	border:1px solid #000;
	margin-bottom:5px;
	padding:8px;
	cursor:default;
}

JavaScript

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//alert("Id "+ev.target.id+" Being drag");
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var obj=document.getElementById(data);
var dropPosX=ev.ClientX;
var dropPosY=ev.ClientY;
$("table").find('.trDrop').each(function(){
var tableTr=$(this);
var posX=tableTr.offset().left;
var posY=tableTr.offset().top;
var width=posX+tableTr.width;
var height=posY+tableTr.height;
// Now the main trick
if(dragPosX>posX && dragPosX<width && dragPosY>posY && dragPosY<height)
{
obj.InsertAfter(tableTr);
}
})
}