JSFiddle - React, Tailwind, and code Playground

by Prasad

HTML

<table>
<tr id="tblrw1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <td>
                    <div class="menuBg"></div>
                    	<div>Product Name1</div></td>
                    <td>XXXXXX</td>
                    <td>Status</td>
                    <td>$XX.XX
                    	<div class="link"><a href="#">Change price</a></div>
                    </td>
                    <td>
                    <div class="productPicture"></div>
                    <div class="link"><a href="#">Upload new default picture</a></div></td>
                    <td><div class="remove"></div></td>                    
                    </tr>
                   <tr id="tblrw2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <td><div class="menuBg"></div>
                    	<div>Product Name2</div></td>
                    <td>XXXXXX</td>
                    <td>Status</td>
                    <td>$XX.XX
                    	<div class="link"><a href="#">Change price</a></div>
                    </td>
                    <td>
                    <div class="productPicture"></div>
                    <div class="link"><a href="#">Upload new default picture</a></div></td>
                    <td><div class="remove"></div></td>                    
                    </tr>
                    <tr id="tblrw3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <td><div class="menuBg"></div>
                    	<div>Product Name3</div></td>
                    <td>XXXXXX</td>
                    <td>Status</td>
                    <td>$XX.XX
                    	<div class="link"><a href="#">Change price</a></div>
                    </td>
                    <td>
                    <div class="productPicture"></div>
                    <div class="link"><a...

JavaScript

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

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}
data=datapre="";
function drop(ev)
{	
	var idtarget=idsource=ids=tempid=tempides=null;
	ev.preventDefault();	
	var data=ev.dataTransfer.getData("Text");
	var datapre=document.getElementById(ev.target.id).parentNode.innerHTML;	
	var datare=document.getElementById(data).parentNode.innerHTML;	
	idtarget=ev.target.id;	
	idsource=data;
	ids=idsource;
	idss=idtarget;
	tempid,tempides;
	$('#'+idtarget).attr('id','temp_id');
	$('#'+idsource).attr('id','tempides');
	$('#temp_id').replaceWith(datare);	
	$('#tempides').replaceWith(datapre);
	$('#tempides').attr('id',idss);
	$('#temp_id').attr('id',ids);	
}