JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<div class="demo">
    
<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div id="calendarTrash" class="ui-widget-header">
    <p>Drop here</p>
</div>

</div>

CSS

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin:

JavaScript

$(function() {
$("#draggable").draggable();
    $("#droppable").droppable({
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
            alert(ui.draggable.text());
        }
    });
        $("#calendarTrash").droppable({
        tolerance: 'pointer',
        drop: function (event, ui) {
            var answer = confirm("Delete Event?")
            if (answer) {
                $('#calendar').fullCalendar('removeEvents', event.id);
            }
        }
    });
});