fullcalendar事件删除不适用于eventDragStop方法（完整日历v4）

Question

我正在使用全日历v4。我想删除eventDragStop方法中的事件。

一切正常，但是我无法删除事件。实际上我想在fullcalendar中删除外部事件，也想在外部事件区域中删除fullcalendar事件。

Example for old version。我想用最新版本（v4）构建类似的演示

示例：

    eventDragStop: function( info ) {
        if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
            info.event.remove();
            var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
            el.draggable({
              zIndex: 999,
              revert: true, 
              revertDuration: 0 
            });
            el.data('event', { title: info.event.title, id: info.event.id, stick: true });
        }
    },

完整代码：

 <pre>

    document.addEventListener('DOMContentLoaded', function() {
      var Calendar = FullCalendar.Calendar;
      var Draggable = FullCalendarInteraction.Draggable;

      var containerEl = document.getElementById('external-events');
      var calendarEl = document.getElementById('calendar');
      var checkbox = document.getElementById('drop-remove');

      new Draggable(containerEl, {
        itemSelector: '.fc-event',
        eventData: function(eventEl) {
          return {
            title: eventEl.innerText
          };
        }
      });
      var calendar = new Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        drop: function(info) {
          // is the "remove after drop" checkbox checked?
          if (checkbox.checked) {
            // if so, remove the element from the "Draggable Events" list
            info.draggedEl.parentNode.removeChild(info.draggedEl);
          }
        },
        eventDragStop: function( info ) {
            if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
                info.event.remove();
                var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
                el.draggable({
                  zIndex: 999,
                  revert: true, 
                  revertDuration: 0 
                });
                el.data('event', { title: info.event.title, id: info.event.id, stick: true });
            }
        },
      });
      calendar.render();

        var isEventOverDiv = function(x, y) {
            var external_events = $( '#external-events' );
            var offset = external_events.offset();
            offset.right = external_events.width() + offset.left;
            offset.bottom = external_events.height() + offset.top;

            // Compare
            if (x >= offset.left
                && y >= offset.top
                && x <= offset.right
                && y <= offset .bottom) { return true; }
            return false;
        }


    });

</pre>