Angular Material 10升级后CdkDropList的enter方法失效求助

数据老陈

2026-5-8

解决Angular Material 10升级后CdkDropList enter方法缺失的问题

嘿，我刚踩过这个Angular CDK升级的坑，来帮你搞定这个问题！

升级到Angular Material 10后，CdkDragPlaceholder的enter()方法确实被彻底移除了——这是因为CDK团队重构了拖拽系统的内部逻辑，把占位符的管理整合到了组件内部，不再需要我们手动调用这个方法来初始化位置。

替代方案：

根据你原来的网格拖拽场景，有两种可行的解决方式：

1. 依赖CDK自动管理占位符（推荐）

如果你的需求只是常规的拖拽占位，完全可以让CDK自动处理占位符的位置，不需要手动调用enter()。只需要在模板中正确配置cdkDragPlaceholder即可：

<div cdkDropList (cdkDropListDropped)="onDrop($event)">
  <div *ngFor="let item of items" cdkDrag>
    {{item}}
    <!-- 自定义占位符 -->
    <div *cdkDragPlaceholder class="grid-placeholder"></div>
  </div>
</div>

CDK会自动在拖拽开始时创建并定位占位符，你只需要通过CSS自定义它的样式就行。

2. 手动控制占位符位置（适配原有逻辑）

如果你需要保留类似原来的手动定位逻辑，可以通过拖拽事件获取元素位置，直接操作占位符的样式：

onDragStarted(event: CdkDragStart) {
  // 获取占位符元素
  const placeholder = event.source.getPlaceholderElement();
  if (!placeholder) return;

  const dragElement = event.source.element.nativeElement;
  // 设置占位符的初始位置
  placeholder.style.position = 'absolute';
  placeholder.style.left = `${dragElement.offsetLeft}px`;
  placeholder.style.top = `${dragElement.offsetTop}px`;
  // 把占位符添加到拖拽容器中
  event.source.dropContainer.element.nativeElement.appendChild(placeholder);
}

这样就能替代原来enter()方法的作用，手动将占位符定位到拖拽元素的初始位置。