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><span class="event" id="b" draggable="true">bbb</span></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: #09C;
	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 === 'dragenter') {
       alert("dragenter");
       } 
       if (event.type === 'dragover') {
        alert("dragover");
       }
		   if (event.type === 'drop') {
       alert("drop");
			  var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
			  if($(this).find('span').length===0){
				   de=$('#'+data);
				   de.appendTo($(this));	
				  }
			 
		   };
	   });
})