Angular CDK拖拽：预览时如何始终将拖拽项设为容器最后子项

你可以通过两种方式实现拖拽悬停时预览始终显示在容器末尾：

方法一：利用 cdkDropListEntered 调整预览DOM位置 #

在目标容器的模板上绑定cdkDropListEntered事件：

<div cdkDropList 
     [cdkDropListData]="targetList"
     (cdkDropListEntered)="onDropListEntered($event)"
     (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of targetList" cdkDrag>{{item}}</div>
</div>

在组件类中实现事件处理逻辑，直接修改拖拽预览元素的位置，强制它成为容器的最后子项：

onDropListEntered(event: CdkDropListEntered<any>) {
  const dragPreview = event.item.element.nativeElement.querySelector('.cdk-drag-preview');
  const dropListElement = event.container.element.nativeElement;
  
  if (dragPreview && dropListElement.children.length > 0) {
    dropListElement.appendChild(dragPreview);
  }
}

方法二：自定义排序谓词禁用中间插入 #

通过cdkDropListSortingPredicate配置，让容器拒绝所有中间插入位置，CDK会自动将预览定位到末尾：

模板中添加排序谓词绑定：

<div cdkDropList 
     [cdkDropListData]="targetList"
     [cdkDropListSortingPredicate]="alwaysAppendPredicate"
     (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of targetList" cdkDrag>{{item}}</div>
</div>

组件类中定义谓词函数：

alwaysAppendPredicate() {
  // 返回false表示不允许插入到当前位置，CDK会自动将预览放到容器末尾
  return false;
}

这种方式更贴合CDK的设计逻辑，不仅能让预览自动定位到末尾，还能隐藏多余的插入指示器，配合你已有的drop事件逻辑，确保最终插入位置完全符合需求。

另外，针对容器最多放2个元素的限制，你还可以在cdkDropListEntered中判断容器长度，超过时直接阻止拖拽进入：

onDropListEntered(event: CdkDropListEntered<any>) {
  if (event.container.data.length >= 2) {
    event.item._dragRef.cancel();
  }
}

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