如何使用Angular Material的cdkdrag实现从mat-menu拖拽到页面其他元素

当然可以实现！CDK Drag虽然没直接暴露dataTransfer属性，但咱可以通过它提供的事件钩子拿到原生拖拽事件，再操作dataTransfer来实现从Mat-Menu到页面其他元素的拖拽。下面是具体步骤：

• 给Mat-Menu菜单项加CDK Drag指令
  先给mat-menu-item加上cdkDrag，但要注意：默认点击菜单项会触发菜单关闭，所以得在mousedown事件里阻止事件冒泡，避免拖拽还没开始菜单就关了。示例代码：

  <mat-menu #menu="matMenu">
    <button mat-menu-item cdkDrag (mousedown)="$event.stopPropagation()">
      <span cdkDragHandle>拖拽项1</span>
    </button>
    <button mat-menu-item cdkDrag (mousedown)="$event.stopPropagation()">
      <span cdkDragHandle>拖拽项2</span>
    </button>
  </mat-menu>
  

• 通过CDK Drag事件操作原生dataTransfer
  CDK Drag的cdkDragStarted事件能拿到原生的DragEvent，这里就可以设置dataTransfer的数据；目标元素用cdkDropList接收，在cdkDropListDropped事件里读取数据。组件里的代码示例：

  import { CdkDragStart, CdkDropListDrop } from '@angular/cdk/drag-drop';
  import { MatMenu } from '@angular/material/menu';
  import { ViewChild } from '@angular/core';
  
  @ViewChild('menu') menu!: MatMenu;
  
  // 拖拽开始时设置数据
  onDragStarted(event: CdkDragStart) {
    const nativeDragEvent = event.event as DragEvent;
    if (nativeDragEvent.dataTransfer) {
      // 把拖拽项的文本存到dataTransfer里，也可以存自定义数据
      nativeDragEvent.dataTransfer.setData('text/plain', event.source.elementRef.nativeElement.textContent.trim());
      nativeDragEvent.dataTransfer.effectAllowed = 'move';
    }
    // 强制保持菜单打开，防止拖拽时菜单自动关闭
    if (!this.menu.opened) {
      this.menu.open();
    }
  }
  
  // 拖拽完成后处理数据
  onDropped(event: CdkDropListDrop) {
    const nativeDragEvent = event.event as DragEvent;
    const draggedContent = nativeDragEvent.dataTransfer?.getData('text/plain');
    if (draggedContent) {
      // 这里写你拿到拖拽数据后的逻辑，比如添加到目标列表
      console.log('拖过来的内容:', draggedContent);
    }
    // 拖拽结束后关闭菜单
    this.menu.close();
  }
  

• 配置目标元素的Drop List
  在页面需要接收拖拽的区域加上cdkDropList，绑定cdkDropListDropped事件：

  <div cdkDropList (cdkDropListDropped)="onDropped($event)" class="drop-container">
    <p>拖拽到这里</p>
  </div>
  

这种方案既用到了CDK Drag的封装能力，又借助原生dataTransfer实现了跨容器的数据传递，完美解决从Mat-Menu拖拽到页面元素的需求。

内容的提问来源于stack exchange，提问作者Gustavo López Frutos