JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="drag" style="width: 150px;">Hello, please drag me</div>
<br/>
<table>
    <tr>
        <td></td>
        <td>Not empty</td>
    </tr>
</table>

CSS

td {
    width: 100px;
    border: 1px solid black;
}

table, div {
    border: 1px solid black;
}

.hover {
    background-color: Red;
}

JavaScript

$(function() {
    $('div').draggable({
        helper: 'clone',
        revert: 'invalid'
    });
    $('td').droppable({
        accept: function(ev) {
            return $(this).is(':not(:empty)');
        },
        drop: function(ev, ui) {
            alert('Drop successful!');
        
            // Do your stuff
        },
        hoverClass: 'hover'
    });
});