Javascript 无法在时间段之间拖动事件

我不明白为什么我不能在时间段之间拖动事件，但可以在资源之间拖动事件

我有一个交互插件，当我在资源之间拖动一个事件时，我会得到进行更改所需的信息，效果很好。如果我尝试将事件从其时间段拖到另一个时间段，则事件根本不会拖。我已经检查了文档并查看了示例，但我显然遗漏了一些东西

<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Meeting Manager</title>


  <link href='/fullcalendar/core/main.css' rel='stylesheet' />
  <link href='/fullcalendar/timeline/main.css' rel='stylesheet' />
  <link href='/fullcalendar/resource-timeline/main.css' rel='stylesheet' />
  <link href='../css/bootstrap.min.css' rel='stylesheet' />
  <link href='../css/maincj.css' rel='stylesheet' />

  <script src='/fullcalendar/core/main.js'></script>
  <script src='/fullcalendar/interaction/main.js'></script>
  <script src='/fullcalendar/timeline/main.js'></script>
  <script src='/fullcalendar/resource-common/main.js'></script>
  <script src='/fullcalendar/resource-timeline/main.js'></script>

  <script src='/fullcalendar/moment/main.js'></script>

  <script src="../js/jquery-3.4.1.min.js"></script>
  <script src="../js/jquery.validate.js"></script>
  <script src='../js/bootstrap.min.js'></script>

  <script src='../js/moment.min.js'></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      defaultView: 'resourceTimelineDay',
      plugins: ['interaction', 'moment', 'resourceTimeline'],
      titleFormat: { month: 'long', year: 'numeric', day: 'numeric', weekday: 'long' },
      selectable: true,
      aspectRatio: 1.6,
      editable: true, // handles for editing event
      dropable: true,
      slotDuration: '00:15',
      resourceAreaWidth: "20%",
      minTime: '08:00',
      maxTime: '18:00',
      header: {
        left: 'today prev,next createRoom',
        center: 'title',
        right: ''
      },
      select: (info) => {

        const addMeeting = info;
        const room = addMeeting.resource.id

        $('#resourceId').val(room);
        $('#meetingTitle').val("");
        $('#date').val(moment(addMeeting.start).format('DD'));
        $('#sHour').val(moment(addMeeting.startStr).format('HH'));
        $('#sMinute').val(moment(addMeeting.startStr).format('mm'));
        $('#eHour').val(moment(addMeeting.endStr).format('HH'));
        $('#eMinute').val(moment(addMeeting.endStr).format('mm'));
        $('#host').val("");
        $('#hostDetails').val("");
        $('#bookedBy').val("");
        $('#eventClickModal').modal('show');

        $('#createupdateMeeting').on('click', function () {
          if ($('#meetingTitle').val().length > 1 &&
            $('#host').val().length > 1 &&
            $('#hostDetails').val().length > 1 &&
            $('#bookedBy').val().length > 1) {
            const today = moment();
            const start = today.format('YYYY') + '-' + today.format('MM') + '-' + $('#date').val() + ' ' +
              $('#sHour').val() + ':' + $('#sMinute').val();
            const end = today.format('YYYY') + '-' + today.format('MM') + '-' + $('#date').val() + ' ' +
              $('#eHour').val() + ':' + $('#eMinute').val();
            const update = {
              resourceId: room,
              meetingDate: $('#date').val(),
              start: start,
              end: end,
              title: $('#meetingTitle').val(),
              hostName: $('#host').val(),
              hostContactDetails: $('#hostDetails').val(),
              bookedBy: $('#bookedBy').val(),
            };
            const options = {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(update)
            };

            fetch('/meetingNew', options);
            $('#eventClickModal').modal('hide');
            console.log(update.resourceId);
          }
        });

      },
      eventDrop: async (event) => {
        // if (!event.newResource === null) alert('did not move resource');
        // console.log(event.newResource.id, event.oldResource.id);

        // TODO
      },
      customButtons: {
        createRoom: {
          text: 'New room',
          click: function () {
            $('#id').val();
            $('#title').val();
            $('#occupancy').val();
            $('#resourceClickModal').modal('show');

            $('#createupdateRoom').on('click', async (e) => {
              if ($('#title').val().length > 2 && $('#occupancy').val().length > 0) {
                const update = {
                  title: $('#title').val(),
                  occupancy: $('#occupancy').val()
                }
                const options = {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify(update)
                };
                const response = await fetch('/addRoom', options);
                const data = response.json();
                $('#resourceClickModal').modal('hide');
              }
            });
          }
        }
      },
      aspectRatio: 4,
      events: '/eventsJSON/',
      resourceColumns: [
        {
          labelText: 'Room',
          field: 'title'
        },
        {
          labelText: 'PAX',
          field: 'occupancy',
          width: 40
        },
        {
          labelText: 'Display',
          field: 'id',
          width: 60
        },
      ],
      resources: '/roomsJSON/',
      resourceRender: function (renderInfo) {
        renderInfo.el.addEventListener("click", function () {
          $('#id').val(renderInfo.resource.id);
          $('#title').val(renderInfo.resource.title);
          $('#occupancy').val(renderInfo.resource.extendedProps.occupancy);
          $('#resourceClickModal').modal('show');
        });
        $('#createupdateRoom').on('click', async () => {
          if ($('#title').val().length > 2 && $('#occupancy').val().length > 0) {

            const update = {
              id: $('#id').val(),
              title: $('#title').val(),
              occupancy: $('#occupancy').val()
            }
            const options = {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(update)
            };

            const response = await fetch('/roomUpdate', options);
            const data = response.json();
            $('#resourceClickModal').modal('hide');
            calendar('refetchEvents');
          }
        });
      }
    });


    calendar.render();
  });

会议经理
document.addEventListener（'DOMContentLoaded'，函数（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
defaultView:“resourceTimelineDay”，
插件：['interaction'、'moment'、'resourceTimeline']，
标题格式：{月：'长'，年：'数字'，日：'数字'，工作日：'长'}，
是的，
方面：1.6，
可编辑：true，//用于编辑事件的句柄
真的，
慢速持续时间：“00:15”，
resourceAreaWidth：“20%”，
minTime:'08:00'，
maxTime:'18:00'，
标题：{
左：“今天上一个，下一个createRoom”，
中心：'标题'，
对：“”
},
选择：（信息）=>{
const addMeeting=info；
const room=addMeeting.resource.id
$（'#resourceId'）.val（房间）；
$（“#会议名称”）.val（“”）；
$（'#date'）.val（moment（addMeeting.start）.format（'DD'））；
$（'#sHour'）.val（矩（addMeeting.startStr）.format（'HH'））；
$（'sMinute'）.val（矩（addMeeting.startStr）.format（'mm'）；
$（'#eHour'）.val（矩（addMeeting.endStr）.format（'HH'））；
$（'#eminate'）.val（矩（addMeeting.endStr）.format（'mm'）；
$（'#host'）.val（“”）；
$（'#hostDetails'）.val（“”）；
$（“#bookedBy”）.val（“”）；
$（'#eventclickmodel'）.model（'show'）；
$（'#createupdateMeeting'）。在（'单击'，函数（）{
如果（$（'#meetingTitle'）.val（）.length>1&&
$（'#host'）.val（）.length>1&&
$（'#hostDetails'）.val（）.length>1&&
$（'#bookedBy'）.val（）.length>1）{
const today=时刻（）；
const start=today.format（'YYYY'）+'-'+today.format（'MM'）+'-'+$（'#date'）.val（）+''+
$（'#sHour'）.val（）+'：'+$（'#sMinute'）.val（）；
const end=today.format（'YYYY'）+'-'+today.format（'MM'）+'-'+$（'#date'）.val（）+''+
$（'#eHour'）.val（）+'：'+$（'#eMinute'）.val（）；
常数更新={
资源ID：房间，
会议日期：$（“#日期”）.val（），
开始：开始，
完:完,，
标题：$（“#会议标题”）.val（），
主机名：$（“#主机”）.val（），
hostContactDetails:$（'#hostDetails'）.val（），
bookedBy:$（'#bookedBy'）.val（），
};
常量选项={
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（更新）
};
获取（'/meetingNew'，选项）；
$（'#eventClickModal'）.modal（'hide'）；
console.log（update.resourceId）；
}
});
},
eventDrop:async（事件）=>{
//如果（！event.newResource===null）警报（'未移动资源'）；
//日志（event.newResource.id，event.oldResource.id）；
//待办事项
},
自定义按钮：{
createRoom：{
文本：“新房间”，
单击：函数（）{
$（'#id'）.val（）；
$（'#title'）.val（）；
$（'占用'）.val（）；
$（“#resourceClickModal”）.modal（'show'）；
$（'#CreateUpdateeRoom'）。在（'单击'，异步（e）=>{
如果（$（'#title'）.val（）.length>2&$（'#occulation'）.val（）.length>0）{
常数更新={
标题：$（'#title'）.val（），
入住率：$（“#入住率”）.val（）
}
常量选项={
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（更新）
};
const response=等待获取（'/addRoom'，选项）；
const data=response.json（）；
$（“#resourceClickModal”）.modal（'hide'）；
}
});
}
}
},
方面：4，
事件：'/eventsJSON/'，
资源列：[
{
labelText:“房间”，
字段：“标题”
},
{
labelText:“帕克斯”，
字段：'占用'，
宽度：40
},
{
labelText:“显示”，
字段：“id”，
宽度：60
},
],
资源：'/roomsJSON/'，
resourceRender:函数（renderInfo）{
renderInfo.el.addEventListener（“单击”，函数（）{
$（'#id'）.val（renderInfo.resource.id）；
$（'#title'）.val（renderInfo.resource.title）；
$（'#occulation'）.val（renderInfo.resource.extendedProps.occulation）；
$（“#resourceClickModal”）.modal（'show'）；
});
$（'#CreateUpdateeRoom'）。在（'单击'，异步（）=>{
如果（$（'#title'）.val（）.length>2&$（'#occulation'）.val（）.length>0）{
常数更新={
id:$（'#id'）.val（），
标题：$（'#title'）.val（），
入住率：$（“#入住率”）.val（）
}
常量选项={
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（更新）
};
const response=wait fetch（'/roomUpdate'，选项）；
const data=response.json（）；
$（“#resourceClickModal”）.modal（'hide'）；
日历（“参考事件”）；
}
});
}
});
calendar.render(