FullCalendar拖拽编辑事件时位置未跟随鼠标存在固定偏移

常见触发原因与修复方案 #

• CSS层叠上下文干扰
  这是这类固定偏移问题最高发的原因：FullCalendar拖拽时的事件占位元素默认基于视口计算坐标，如果日历容器、任意父级节点设置了transform、perspective、filter、will-change: transform这类会创建独立层叠上下文的CSS属性，会直接打乱坐标计算基准。
  排查时可以逐层注释日历父元素的特殊样式，重点检查是否有全局给body、根容器加过平移动画、缩放适配、毛玻璃效果这类属性，找到干扰属性移除即可。
• 拖拽配置冲突
  检查FullCalendar初始化配置，以及是否额外引入了其他拖拽库（比如jQuery UI Draggable、interact.js）：
  • 确认没有重复给事件元素绑定拖拽事件
  • 如果用了外部拖拽功能，检查drop相关配置里是否错误设置了固定偏移值
  • 确认拖拽时生成的代理元素挂载节点为body，不要挂载在带相对定位/偏移的自定义容器内
• 页面缩放适配导致坐标计算偏差
  先按Ctrl+0重置浏览器默认缩放比例排除浏览器缩放的影响，再检查代码里是否给html、body设置了非1值的zoom属性、CSSscale缩放做页面适配，这类缩放会导致鼠标实际坐标和元素渲染位置的计算比例不匹配，出现固定偏移。如果业务必须保留全局缩放，需要在拖拽开始的回调里手动计算缩放比例，修正事件元素的定位坐标。
• 版本兼容问题
  检查项目内引入的FullCalendar核心包和交互插件@fullcalendar/interaction的版本号是否完全一致，跨版本混用核心包和交互插件时，经常会出现坐标计算逻辑不匹配的问题，将所有FullCalendar相关依赖统一到同一版本后重新构建即可。

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