Fullcalendar使用Draggable实现外部拖拽时拖拽虚影样式异常问题

第一步：捕获拖拽过程中的动态元素 #

你可以用控制台延时断点的方式审查拖拽过程中才出现的虚影元素，操作方法如下：

• 打开浏览器开发者工具的控制台面板
• 输入代码 setTimeout(() => {debugger}, 3000) 后回车
• 3秒内触发拖拽动作，待JS进入断点暂停后，切换到元素面板即可找到动态生成的虚影元素，该元素一般是body的直接子节点，带有fc-draggable-mirror、fc-dragging类名

常见异常原因及修复方案 #

原因1：样式继承异常 #

虚影元素默认插入到body节点下，无法继承原始元素父容器的样式规则，同时可能被全局通配符样式意外覆盖，修复方法如下：

• 找到虚影元素的类名后，针对性写覆盖样式，直接复用原始拖拽元素的样式即可，示例：

/* 替换为你实际找到的虚影元素类名 */
.fc-draggable-mirror {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  width: fit-content !important;
  /* 补充原始元素的其余样式 */
}

原因2：Draggable初始化参数配置缺失 #

初始化时未指定appendTo参数导致虚影元素挂载节点层级不符，修复方法：

• 初始化Draggable时添加appendTo配置，将虚影元素挂载到和原始拖拽元素相同的父容器下，示例：

import { Draggable } from '@fullcalendar/interaction'

const dragContainer = document.getElementById('external-events') // 外部拖拽元素的父容器

new Draggable(dragContainer, {
  itemSelector: '.event-item', // 你的拖拽元素选择器
  appendTo: dragContainer, // 新增该行配置
  eventData: (eventEl) => {
    return {
      title: eventEl.innerText,
      className: eventEl.classList // 同步原始元素的类名，保证样式继承
    }
  }
})

原因3：自定义类丢失 #

如果你的原始拖拽元素依赖自定义类实现样式，默认生成的虚影元素不会继承这些类，可在eventData配置中主动传递类名即可解决。

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