JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<ul>
    <li>List Item</li>
</ul>
<br />
<br />
<div class="container"></div>
<div id="log"></div>

CSS

.container {
    width: 300px;
    height: 300px;   
    background-color: #ccddcc;        
}

JavaScript

$(document).ready(function () {
    $('li').draggable({
        revert: 'invalid'          
    });
    $('.container').droppable({
        accept: 'li',
        tolerance: 'pointer',
        drop: function (event, ui) {
            alert('inside');                
        },
        over: function (event, ui) {
            $('#log').text('over');
        },
        out: function (event, ui) {
            $('#log').text('out');
        }
    });
});