JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">&#9820;</div>
<div class="draggable">&#9822</div>
<div class="draggable">&#9821</div>

<table style="font:monospace; font-size:36pt;" cellpadding="10" cellspacing="10">     
<tr><td class="droppable" /><td class="droppable" /><td class="droppable" /></tr>    
<tr><td class="droppable" /><td class="droppable" /><td class="droppable" /></tr>
    <tr><td class="droppable" /><td class="droppable" /><td class="droppable" /></tr>
</table>

CSS

.draggable { font:monospace; font-size:36pt;display:inline-block; width:60px; height:60px;background-color:red; border:solid 1px red;  margin:5px;vertical-align:middle;text-align:center;} 

.droppable { font:monospace; font-size:36pt;display:inline-block; width:70px; height:70px; border:solid 1px black;vertical-align:middle;text-align:center; }

JavaScript

$(document).ready(function() {
    $('.draggable').draggable({
        cursor: 'move',
        helper: 'clone',
        revert: 'false',
            });

    $('.droppable').droppable({
        drop: function(event, ui) {
            if ($(this).find('div.draggable').length == 0) {
                $(this).append($(ui.draggable));
            } else { alert('invalid move!'); }

        }
    });
});