Javascript 无法在日历上删除外部元素

当我在日历上拖动外部元素时，我无法通过它在日历上创建事件。eventReceive（）回调也未被激发

我也将droppable选项设置为true。有人能帮忙吗？请看一下代码：

HTML:

---

我实现这一点的方法不是通过eventReceive，也不是eventDrop，而是使用“drop”事件。签名类似于：

---

customDrop=（{resource，date，draggedEl:{id}}}）=>{}）

不清楚您是否根据启用了jQueryUI作为第三方拖动库？这是fullCalendar v4中的必要步骤。否则，您可以只使用fullCalendar的内置可拖动类，如下所示perhttps://fullcalendar.io/docs/external-dragging

<div class="fc-event">Drag me !!</div>

$('.fc-event').each(() => {
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            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)
            duration: '02:00',
            create: true,
        });

        // 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
        });
    });
    const calendarEl = document.getElementById('calendar');
    calendar = new Calendar(calendarEl, {
        themeSystem: 'standard',
        selectable: true,
        droppable: true,
        columnHeader: true,
        selectMirror: true,
        editable: true,
        plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
        eventResourceEditable: true,

        select(selectionInfo) {
            showTaskCreationPopup(selectionInfo.start, selectionInfo.end);
        },

        eventReceive(element) {
            console.log('event received');
            createTask(element.event);
        },

        drop(info) {
            console.log('dropped');
            createTask(info.jsEvent);
        },

        eventDrop(info) {
            console.log('event dropped');
        },

        header: {
            left: 'prevYear prev today next nextYear',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },

        buttonText: {
        // eslint-disable-next-line new-cap
            prevYear: new moment().year() - 1,
            // eslint-disable-next-line new-cap
            nextYear: new moment().year() + 1,
        },
    });
    calendar.render();

var containerEl = document.getElementById('external-events-list');
var eventEls = Array.prototype.slice.call(
 containerEl.querySelectorAll('.fc-event')
 );
 eventEls.forEach(function(eventEl) {


if (eventEl.textContent == "Event1") {
  new Draggable(eventEl, {
    eventData: {
      id: 1,
      title: eventEl.innerText.trim(),
      color: 'Orange',
      textColor:'black'
    }
  });
} else if (eventEl.textContent == "Event2") {
  new Draggable(eventEl, {
    eventData: {
      id: 2,
      title: eventEl.innerText.trim(),
      color: '#ccccff',
      textColor:'black'
    }
  });

   }}); // end eventEls.forEach