WebStorm Angular Material项目中Cdk拖放事件无法触发如何解决

你遇到的问题是cdkDragExited事件的触发机制理解有误，该事件仅当被拖拽的cdkDrag元素离开父级绑定了cdkDropList指令的容器时才会触发，你当前的代码没有为拖拽元素外层套cdkDropList容器，所以事件永远不会被触发，自然没有控制台输出。

分两种场景提供解决方案：

场景1：仅需要监听自由拖拽的相关事件（不需要拖拽到其他容器） #

你可以直接替换为cdkDrag自带的、无需依赖cdkDropList的事件：

• cdkDragStarted：拖拽开始时触发
• cdkDragMoved：拖拽过程中每次位置变化时触发
• cdkDragEnded：拖拽结束时触发

代码修改示例： #

1. 组件模板修改：

<div 
  class="example-box" 
  cdkDrag 
  [cdkDragData]="{name: 'Windows 10 Machine', ip: '192.168.1.1'}"
  (cdkDragStarted)="onDragStart($event)"
  (cdkDragEnded)="onDragEnd($event)"
>
<mat-card class="example-card">
  <mat-card-header>

  </mat-card-header>
  <img mat-card-image src="https://icons.iconarchive.com/icons/dakirby309/simply-styled/256/Desktop-Windows-icon.png" alt="Windows 10">
  <mat-card-content>
      Windows 10 Machine
      <br /> Location 192.168.1.1
  </mat-card-content>
  <mat-card-actions>

  </mat-card-actions>
</mat-card>
</div>

2. 组件类修改：

import {Component} from '@angular/core';
import {CdkDragStart, CdkDragEnd} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-device-component',
  templateUrl: './device-component.component.html',
  styleUrls: ['./device-component.component.css']
})
export class DeviceComponentComponent {
  onDragStart(event: CdkDragStart) {
    console.log('拖拽开始，元素数据：', event.item.data);
  }

  onDragEnd(event: CdkDragEnd) {
    console.log('拖拽结束，最终位置：', event.source.getFreeDragPosition());
  }
}

场景2：确实需要使用cdkDragExited事件（用于跨容器拖拽场景） #

你需要先在拖拽元素的外层添加绑定了cdkDropList指令的容器，当拖拽元素离开这个容器范围时，cdkDragExited就会正常触发：

代码修改示例： #

<!-- 外层添加cdkDropList容器 -->
<div cdkDropList class="drag-container" style="width: 100vw; height: 100vh;">
  <div 
    class="example-box" 
    cdkDrag 
    [cdkDragData]="{name: 'Windows 10 Machine', ip: '192.168.1.1'}"
    (cdkDragExited)="exited($event)"
  >
    <!-- 原有卡片内容 -->
  </div>
</div>

额外注意点 #

你之前的代码中event.item.data为空，是因为没有给cdkDrag绑定[cdkDragData]属性，按上面示例绑定对应数据后即可正常读取。

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