如何基于FullCalendar HTML5 Drag & Drop Api实现跨多显示器拖拽任务到日历？

我最近刚好碰到了一模一样的需求：要把一台显示器上任务列表里的任务，拖拽到另一台显示器的日历组件中。一开始用jQuery UI的拖拽功能试了半天，发现根本行不通——它的作用域完全局限在单个浏览器窗口内，跨显示器的目标容器根本识别不到拖拽事件。

折腾了一阵后，我摸索出一个临时解决方案，虽然还有优化空间，但应该能给有同类需求的朋友提供个思路：

• 记录拖拽任务的核心数据：在任务项的dragstart事件里，把任务的关键信息（比如ID、标题、计划时间）存入sessionStorage，同时标记拖拽开始的状态。
• 跨窗口的拖拽状态感知：监听当前窗口的mouseleave事件，当拖拽的鼠标移出当前窗口时，生成一个跟随鼠标的临时浮动卡片（和原任务样式保持一致）。同时通过全局鼠标位置监听，判断鼠标是否进入了另一台显示器上的日历窗口。
• 触发日历端的接收逻辑：当鼠标进入日历所在窗口时，读取sessionStorage里的任务数据，在日历窗口内生成对应的拖拽替身，然后手动触发日历组件的拖拽接收事件，完成任务的添加。
• 清理临时数据与元素：拖拽完成或取消后，立即清除sessionStorage里的临时数据，销毁浮动卡片，避免留下状态残留。

当然这个方案还有不少需要打磨的地方：

• 全局鼠标监听可能带来性能开销，得加上防抖处理
• 窗口间的状态同步偶尔会有延迟，需要优化数据传递的时机
• 拖拽替身的样式还原度还不够，得调整样式匹配原任务卡片

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