JSFiddle - React, Tailwind, and code Playground

HTML

<table id="#our_table"  border="1">
<tr>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</tr>
<tr>
<td><span class="event" id="a" draggable="true">aaa</span></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td> 
<td></td>
</tr>
</table>

CSS

table th,table td{
	height: 30px;
	width: 200px;
	
}
table span{
	display:block;
	background-color: #fff;
	height: 100%;
	width: 100%;
}

JavaScript

$(document).ready(function(){
		$('.event').on("dragstart", function (event) {
			  var dt = event.originalEvent.dataTransfer;
			  dt.setData('Text', $(this).attr('id'));
			});
	    $('table td').on("dragenter dragover drop", function (event) {	
		   event.preventDefault();
		   if (event.type === 'drop') {
			  var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
			  de=$('#'+data).detach();
			  de.appendTo($(this));	
        alert("svsf");
		   };
	   });
})