JSFiddle - React, Tailwind, and code Playground

HTML

<form name="myform" id="myform" action="testme.php" method="post"> 


<table id="loc" border="1">
       
    <table id="game">

<tr>
    <td> <div class='cellprefix'>8</div></td>
     <td><div class='gamecell'><div id='a1' ondrop="drop(event);" ondragover="allowDrop(event)">
                <img src="https://cdn4.iconfinder.com/data/icons/board-games-1/110/Knight-512.png" width="30px" height="30px"
                ondragstart="drag(event);" draggable="true"/></div></div></td>
	   <td><div class='gamecell grey'><div ondrop="drop(event);" id='a2' ondragover="allowDrop(event)">2</div></div></td>
	   <td><div class='gamecell' id='a3'>3</div></td>
	   <td><div class='gamecell grey' id='a4'>4</div></td>
	   <td><div class='gamecell' id='a5'>5</div></td>
	   <td><div class='gamecell grey' id='a6'>6</div></td>
	   <td><div class='gamecell' id='a7' >7</div></td>
	   <td><div class='gamecell grey' id='a8'>8</div></td>
   </tr>
<tr>
     <td><div class='cellprefix'>7</div></td>
	   <td><div class='gamecell grey' id='b1'>9</div></td>
	   <td><div class='gamecell' id='b2'>10</div></td>
	   <td><div class='gamecell grey' id='b3'>11</div></td>
	   <td><div class='gamecell' id='b4'>12</div></td>
	   <td><div class='gamecell grey' id='b5'>13</div></td>
	   <td><div class='gamecell' id='b6'>14</div></td>
	   <td><div class='gamecell grey' id='b7'>15</div></td>
	   <td><div class='gamecell' id='b8'>16</div></td>
</tr>
<tr>
     <td><div class='cellprefix'>6</div></td>
	   <td><div class='gamecell' id='c1'>17</div></td>
	   <td><div class='gamecell grey' id='c2'>18</div></td>
	   <td><div class='gamecell' id='c3'>19</div></td>
	   <td><div class='gamecell grey' id='c4'>20</div></td>
	   <td><div class='gamecell' id='c5'>21</div></td>
	   <td><div class='gamecell grey' id='c6'>22</div></td>
	   <td><div class='gamecell' id='c7'>23</div></td>
	   <td><div class='gamecell grey' id='c8'>24</div></td>
   </tr>
   <tr>
    <td><div class='cellprefix'>5</div></td>
	   <td><div...

CSS

div *{
padding:0;
margin:0;
box-sizing:border-box;
}
#game{
max-height:504px;
max-width:504px;
height:100%;
width:100%;
position:relative;
margin: 20px auto;
}
.cellprefix
{
width:100%;
height:100%$;
max-height:50px;
max-width:50px;
float:left;
margin:3px;
padding:5px 0 0 30px;
}
.gamecell
{
border:1px solid #00a4a2;
width:100%;
background-color:white;
height:100%;
max-height:50px;
max-width:50px;
margin:3px;
float:left;
transition: all 0.5s ease-in-out;
border-radius:5px;
padding: 0 0 0 6px;
font-size:38px;
z-index:1;
}

JavaScript

function drag(ob)
{
    ob.dataTransfer.setData("img",ob.target.id);
}

function drop(ob)
{
    var id = ob.dataTransfer.getData("img");
    if (!$(ob.currentTarget).find("img")[0])
        ob.target.appendChild(document.getElementById(id));
    ob.preventDefault();    
}

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