如何让@angular/cdk/drag-drop的cdkDropListConnectedTo跨iframe生效

@angular/cdk/drag-drop 的拖放交互默认绑定在当前运行上下文的document对象上，父页面与iframe属于两个相互隔离的JS上下文，各自持有独立的document事件流：

• 父页面触发拖拽后，鼠标移入iframe区域时，父页面绑定的mousemove、mouseup事件会被截断，无法继续追踪拖拽位置
• iframe内的列表B运行在独立上下文，无法感知父页面正在进行的拖拽操作，因此cdkDropListConnectedTo配置的跨列表连接逻辑完全失效。

方案1：自定义事件桥接（侵入性最低，兼容原有cdk逻辑） #

不需要修改原有列表的业务逻辑，只需要在父页面和iframe之间加一层事件桥接层即可：

1. 父页面拖拽初始化阶段，提前获取iframe元素的位置矩形：

   const iframeEl = document.getElementById('target-iframe') as HTMLIFrameElement;
   const iframeRect = iframeEl.getBoundingClientRect();
   

2. 给父页面的cdkDrag绑定cdkDragMoved事件，实时判断鼠标是否进入iframe范围：

   onDragMoved(event: CdkDragMove) {
     const { x: mouseX, y: mouseY } = event.pointerPosition;
     const isInIframe = mouseX >= iframeRect.left && mouseX <= iframeRect.right
       && mouseY >= iframeRect.top && mouseY <= iframeRect.bottom;
     
     if (isInIframe) {
       // 转换为iframe内的相对坐标，把拖拽状态、拖拽项数据传给iframe
       const innerX = mouseX - iframeRect.left;
       const innerY = mouseY - iframeRect.top;
       iframeEl.contentWindow?.postMessage({
         type: 'DRAG_MOVE',
         data: this.draggingItemData,
         position: { x: innerX, y: innerY }
       }, '*');
     }
   }
   

3. iframe内的应用监听message事件，拿到拖拽状态后，手动调用自身CdkDropList实例的内置方法模拟拖放行为：

   // iframe内逻辑
   @ViewChild(CdkDropList) listB: CdkDropList;
   
   @HostListener('window:message', ['$event'])
   onMessage(event: MessageEvent) {
     if (event.data.type === 'DRAG_MOVE') {
       // 模拟拖拽进入列表
       this.listB.enter();
       // 判断坐标是否落在列表放置区域内，匹配后调用drop方法完成放置
       const rect = this.listB.element.nativeElement.getBoundingClientRect();
       if (event.data.position.x >= rect.left && event.data.position.x <= rect.right
           && event.data.position.y >= rect.top && event.data.position.y <= rect.bottom) {
         this.listB.drop({
           item: { data: event.data.data } as CdkDrag,
           currentIndex: 0, // 根据鼠标位置计算实际插入索引
           previousIndex: -1,
           container: this.listB,
           previousContainer: null,
           isPointerOverContainer: true,
           distance: {x:0, y:0},
           dropPoint: event.data.position,
           event: {} as MouseEvent
         });
         // 放置完成后回传消息给父页面，同步两边列表数据
       }
     }
   }
   

4. 拖拽预览节点统一挂载到父页面body下，避免被iframe边界截断，可通过cdkDragPreview的viewContainerRef配置实现。

方案2：替换拖放底层监听源 #

如果不想手动做消息桥接，可以直接修改cdk拖放的默认document引用，让iframe内的cdk实例直接使用父页面的document作为事件监听源，该方案要求父页面和iframe必须完全同域：

// iframe内的应用初始化时提供CDK_DRAG_DOCUMENT注入令牌
import { CDK_DRAG_DOCUMENT } from '@angular/cdk/drag-drop';

@NgModule({
  providers: [
    {
      provide: CDK_DRAG_DOCUMENT,
      useFactory: () => window.parent.document
    }
  ]
})
export class IframeAppModule {}

注入后两边的cdk拖放实例会共用同一个document事件流，cdkDropListConnectedTo可直接通过window.parent拿到父页面的列表实例完成连接，注意坐标计算时要统一加上iframe的偏移量修正。

• 跨域iframe无法实现该交互，跨域安全策略会阻断上下文访问和消息传递中的非序列化内容
• 不要混用原生HTML5 drag API和Angular CDK拖放，二者事件流逻辑不兼容，会导致状态错乱
• 拖拽过程中不要给iframe设置pointer-events: none，否则iframe内无法接收到位置判断所需的坐标信息

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