Vue2.6通过CDN使用FullCalendar Draggable遇‘Draggable未定义’问题

问题场景 #

在Vue2.6中通过CDN引入FullCalendar 6.1.6，使用Draggable功能时触发Draggable is not defined错误，相关代码及CDN引入如下：

组件代码 #

<script>
export default {
  props: {
    events: {
      type: Array
    }
  },
  data: function() {
    return {}
  },
  methods: {
    setupDraggable(){
      var containerEl = document.getElementById('planned-tasks');
      new Draggable(containerEl, {
        itemSelector: '.fc-event',
        eventData: (eventEl) => {
          console.log(eventEl);
          return eventEl;
        }
      });
    }
  },
  mounted(){ this.setupDraggable();}
}
</script>

引入的CDN链接 #

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.6/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.6/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.6/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/vue@6.1.6/dist/index.global.min.js"></script>

曾尝试import Draggable from window.FullCalendar.Interaction.Draggable但未解决问题。

解决步骤 #

• 正确获取全局Draggable对象
  CDN引入的FullCalendar会挂载到window.FullCalendar全局对象，Draggable属于Interaction模块，直接从全局对象获取即可，无需使用import（CDN为全局引入模式，非ES模块）。修改setupDraggable方法：

setupDraggable(){
  var containerEl = document.getElementById('planned-tasks');
  const Draggable = window.FullCalendar.Interaction.Draggable;
  new Draggable(containerEl, {
    itemSelector: '.fc-event',
    eventData: (eventEl) => {
      console.log(eventEl);
      // 注意：需返回符合FullCalendar事件规范的数据结构，示例如下
      return {
        title: eventEl.textContent.trim(),
        start: new Date().toISOString().split('T')[0] // 示例日期，可根据实际调整
      };
    }
  });
}

• 确保DOM元素已渲染
  在mounted钩子中调用方法时，用$nextTick确保目标容器planned-tasks已完成渲染：

mounted(){
  this.$nextTick(() => {
    this.setupDraggable();
  });
}

• 验证CDN加载顺序
  当前CDN加载顺序正确（core → interaction → 其他插件），无需调整。

内容的提问来源于stack exchange，提问作者DamienHupi