FullCalendar跨浏览器标签页拖拽事件实现咨询

兄弟，我完全懂你想要实现跨浏览器标签页拖拽FullCalendar事件的需求，先给你把核心问题说透：官方的External Drag&Drop Demo之所以在复制标签页后拖拽无效，是因为不同浏览器标签页属于独立的浏览上下文，DOM元素是完全隔离的，直接拖拽DOM节点跨标签是浏览器不允许的行为，这和FullCalendar本身的基础实现无关。

不过想要实现这个功能也不是没辙，核心思路是放弃直接拖拽DOM，转而利用浏览器的拖拽数据传输机制来传递事件的结构化数据，具体步骤和代码示例给你列出来：

前提条件 #

两个标签页必须是同源的（协议、域名、端口完全一致），不然浏览器的安全策略会阻止数据跨标签传递，这是硬限制，没办法绕开。

具体实现步骤 #

1. 源标签页：处理拖拽起始事件，传递事件数据
   给页面上的可拖拽外部元素绑定dragstart事件，把事件的关键信息（比如标题、时间、ID等）序列化成JSON，放到拖拽的数据传输对象里：

   // 假设你的可拖拽元素有external-event类
   document.querySelectorAll('.external-event').forEach(el => {
     el.setAttribute('draggable', 'true');
     el.addEventListener('dragstart', function(e) {
       // 构造你需要的事件数据，按需调整字段
       const eventPayload = {
         title: this.textContent.trim(),
         start: new Date().toISOString(), // 也可以自定义时间
         allDay: false,
         backgroundColor: this.style.backgroundColor
       };
       // 用自定义MIME类型存储JSON数据
       e.dataTransfer.setData('application/json', JSON.stringify(eventPayload));
       e.dataTransfer.effectAllowed = 'copy'; // 设置拖拽效果为复制
     });
   });
   

2. 目标标签页：监听拖拽放置，解析数据并添加到日历
   给FullCalendar的容器元素绑定dragover和drop事件，接收传递过来的事件数据，解析后添加到日历中：

   const calendarContainer = document.getElementById('calendar');
   // 阻止默认dragover行为，否则无法触发drop
   calendarContainer.addEventListener('dragover', function(e) {
     e.preventDefault();
     e.dataTransfer.dropEffect = 'copy'; // 匹配源的拖拽效果
   });
   
   // 处理放置事件
   calendarContainer.addEventListener('drop', function(e) {
     e.preventDefault();
     // 取出之前存储的JSON数据
     const eventDataJson = e.dataTransfer.getData('application/json');
     if (!eventDataJson) return;
   
     try {
       const eventData = JSON.parse(eventDataJson);
       // 获取FullCalendar实例，添加事件
       const calendarInstance = FullCalendar.getCalendar(calendarContainer);
       calendarInstance.addEvent(eventData);
       // 可选：如果需要同步源标签页的状态，可以用Broadcast Channel通知
       const channel = new BroadcastChannel('calendar-sync');
       channel.postMessage({ type: 'event-added', data: eventData });
     } catch (err) {
       console.error('解析拖拽事件数据失败:', err);
     }
   });
   

3. 可选：跨标签页状态同步
   如果希望两个标签页的日历状态保持一致，可以用Broadcast Channel API，在源标签页监听广播，收到事件添加的通知后更新自己的日历：

   // 源标签页添加广播监听
   const syncChannel = new BroadcastChannel('calendar-sync');
   syncChannel.onmessage = function(e) {
     if (e.data.type === 'event-added') {
       const calendar = FullCalendar.getCalendar('calendar');
       calendar.addEvent(e.data.data);
     }
   };
   

补充说明 #

官方的External Drag&Drop Demo是为同一页面内的DOM元素拖拽设计的，它依赖于同一上下文内的DOM交互，没有处理跨标签的数据传递逻辑，所以你复制标签页后直接拖拽DOM元素肯定无效，这个测试结果是完全正常的。

内容来源于stack exchange