JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.css">
<div id="content">

  <div class="row">

    <div id="external-events" class="dropdown col-lg-3">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Unscheduled Events
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">Drag events to calendar</li>
        <li class="divider"></li>
        <li><a href="#" data-duration="01:00" data-event='{"id":"803", "title":"Jennifer Ramundo"' class='menu-event'>My Event 1</a></li>
        <li class="divider"></li>
        <li><a href="#" data-event='{"id":"2"}' class='menu-event'>My Event 2</a></li>
        <li class="divider"></li>
        <li><a href="#" data-event="{'id': '3'}" class='menu-event'>My Event 3</a></li>
      </ul>
    </div>

    <div id="trashCan" class="col-lg-3" style="width:100px; height: 100px; border:1px solid black;">Trash</div>
  </div>

  <div id="calendar"></div>
</div>

JavaScript

var elData, newData;

        $('#external-events .menu-event').each(function() {
          // store data so the calendar knows to render an event upon drop
          elData = $(this).data('event');
          newData = {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
          };
          // order of objects is important, duplicated keys in newData overwrite those in elData
          $(this).data('event', $.extend(elData, newData));

          // make the event draggable using jQuery UI
          $(this).draggable({
            zIndex: 999,
            revert: true, // will cause the event to go back to its
            revertDuration: 0 //  original position after the drag
          });
        });

        $("#external-events").draggable();
        $("#calendar").droppable();

        $('#calendar').fullCalendar({
          droppable: true,
          editable: true,
          eventDragStop: function(event, jsEvent) {
            var trashEl = jQuery('#trashCan');
            var ofs = trashEl.offset();
            var x1 = ofs.left;
            var x2 = ofs.left + trashEl.outerWidth(true);
            var y1 = ofs.top;
            var y2 = ofs.top + trashEl.outerHeight(true);
            if (jsEvent.pageX >= x1 && jsEvent.pageX <= x2 &&
              jsEvent.pageY >= y1 && jsEvent.pageY <= y2) {
              $('#calendar').fullCalendar('removeEvents', event.id);
            }
          },
          drop: function(date, jsEvent, ui, resourceId) {
            $(this).parent().next().remove();
            $(this).remove();
            if ($('#external-events').find('.menu-event').length === 0) {
              $('#external-events').hide();
            }
          },
        });