JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <p class="drag">Test item to be dragged around</p>

        <div class="drop1">
            <p class="drop2">Second area to drop the item to</p>
            <p>Placeholder text to give a distinguishing area</p>
        </div>
</body>

JavaScript

$(document).ready(function() {
    $('.drag').draggable();
    $('.drop1').droppable({
        drop: function(event, ui) {
            console.log('foo');
        }
    });
    $('.drop2').droppable({
        drop: function(event, ui) {
            console.log('bar');
        },
    });
});