JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
        <title>mydrag</title>
    </head>
    <body>
        <div id="container">
            <div id="mydrag" >My Drag</div>
            <div id="calendar"></div>
        </div>
    </body>
</html>

CSS

#container {
    width: 600px;
    height: 500px;
}
#mydrag {
    width: 75px;
    height: 30px;
    background-color: red;
}
.drophover {
    background-color:blue;
}

JavaScript

function onExternalEventDrop(date, allDay) {
    alert("Dropped on " + date + " with allDay=" + allDay);
}

$('#mydrag').each(function() {
    var eventObject = {
        title: 'MyDrag Title'
    };

    $(this).data('eventObject', eventObject);

    $(this).draggable({
        containment: '#container',
        helper: 'clone',
        revert: function(droppableObj) {
            if (droppableObj === false) {
                alert('Not a droppable object');
                return true;
            }
            else {
                alert(' yes I am DROPPABLE');
                return false;
            }
        },
        revertDuration: 500,
        start: function(e, ui) {
            $(ui.helper).css('width', $(this).css('width'));
        }
    });

});

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
    },
    defaultView: 'agendaDay',
    editable: true,
    droppable: true,
    drop: function(date, allDay) {
        var originalEventObject = $(this).data('eventObject');
        var copiedEventObject = $.extend({}, originalEventObject);
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;

        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        if ($('#drop-remove').is(':checked')) {
            $(this).remove();
        }
    }
});


$('#calendar .fc-content .fc-agenda-slots .fc-widget-content > div').droppable({
    hoverClass: "drophover"
});