FullCalendar事件内可拖拽元素dragstart/dragstop失效问题求助

问题场景 #

自定义FullCalendar的eventContent后，在渲染的事件内部添加了可拖拽元素，但该元素的dragstart和dragend事件始终无法触发，推测是FullCalendar自带的拖拽逻辑拦截了内部元素的原生拖拽事件。相关代码如下：

this.element.setAttribute('draggable', 'true');
this.element.addEventListener('dragstart', this.dragStart);
this.element.addEventListener('dragend', this.dragEnd);

原因分析 #

FullCalendar为了实现自身的事件拖拽功能，会在事件容器元素上监听鼠标/触摸事件，并且可能通过阻止事件冒泡、调用preventDefault()等方式，拦截内部元素的原生拖拽行为，避免和自身功能冲突。

解决方案 #

1. 阻止事件冒泡到FullCalendar父元素 #

在自定义拖拽元素上添加mousedown和touchstart事件监听器，调用stopPropagation()阻止事件向上冒泡，让FullCalendar的拖拽逻辑无法捕获到该元素的操作，从而释放原生拖拽事件的触发权限：

// 给自定义拖拽元素添加阻止冒泡的逻辑
this.element.addEventListener('mousedown', (e) => {
  e.stopPropagation();
});

this.element.addEventListener('touchstart', (e) => {
  e.stopPropagation();
});

// 原有的拖拽事件绑定
this.element.setAttribute('draggable', 'true');
this.element.addEventListener('dragstart', this.dragStart);
this.element.addEventListener('dragend', this.dragEnd);

2. 排查FullCalendar全局拖拽配置 #

检查是否在FullCalendar初始化时设置了eventDraggable: false或者自定义了eventDragStart/eventDragStop回调，确保这些配置没有额外阻止内部元素的事件传递。如果有自定义回调，避免在其中调用stopPropagation()或preventDefault()影响内部元素。

3. 联动日历拖拽逻辑（可选） #

如果你的拖拽操作需要和日历本身的事件拖拽联动，可以放弃原生拖拽，改用FullCalendar提供的eventDrop、eventDragStart等回调，在这些钩子中结合自定义元素的逻辑实现需求，这种方式更贴合日历的原生交互。

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