如何在Angular CDK拖拽中指定元素进入目标列表的位置索引？

要实现拖拽元素进入目标列表时，直接定位到由orderWeight计算出的索引位置（而非鼠标位置），可以通过以下步骤处理：

1. 编写目标索引计算函数 #

先实现一个函数，根据元素的orderWeight属性，在目标数组中确定它应该插入的位置：

calculateTargetIndex(targetList: any[], item: any): number {
  // 找到第一个orderWeight大于当前元素的项，插入到它前方
  const insertIndex = targetList.findIndex(listItem => listItem.orderWeight > item.orderWeight);
  // 若所有项的orderWeight都小于等于当前元素，插入到数组末尾
  return insertIndex === -1 ? targetList.length : insertIndex;
}

2. 监听拖拽进入事件，手动调整占位符位置 #

利用Angular CDK的cdkDropListDragEntered事件，在元素进入目标列表时，强制将占位符定位到计算好的索引位置：

import { CdkDragEnter, CdkDropList } from '@angular/cdk/drag-drop';

// 组件类内的方法
onDragEntered(event: CdkDragEnter<any>, targetDropList: CdkDropList) {
  const draggedItem = event.item.data;
  const targetList = targetDropList.data;
  const targetIndex = this.calculateTargetIndex(targetList, draggedItem);

  // 获取拖拽引用并重置占位符位置
  const dragRef = event.item._dragRef;
  dragRef.reset();
  // 将占位符插入到目标索引位置
  targetDropList._insertPlaceholder(dragRef, targetIndex);
}

3. 完善模板与拖拽配置 #

在模板中配置cdkDropList，绑定事件与必要属性（如果仅允许跨列表移动，建议将cdkDropListSortingDisabled设为true，禁用列表内排序）：

<div cdkDropListGroup>
  <!-- 源列表 -->
  <div #sourceDropList="cdkDropList"
       cdkDropList
       [cdkDropListData]="sourceList"
       [cdkDropListConnectedTo]="[targetDropList]"
       [cdkDropListSortingDisabled]="true"
       (cdkDropListDropped)="onDrop($event)">
    <div *ngFor="let item of sourceList" cdkDrag [cdkDragData]="item">
      {{item.name}} (权重: {{item.orderWeight}})
    </div>
  </div>

  <!-- 目标列表 -->
  <div #targetDropList="cdkDropList"
       cdkDropList
       [cdkDropListData]="targetList"
       [cdkDropListConnectedTo]="[sourceDropList]"
       [cdkDropListSortingDisabled]="true"
       (cdkDropListDragEntered)="onDragEntered($event, targetDropList)"
       (cdkDropListDropped)="onDrop($event)">
    <div *ngFor="let item of targetList" cdkDrag [cdkDragData]="item">
      {{item.name}} (权重: {{item.orderWeight}})
    </div>
  </div>
</div>

4. 确认最终放置逻辑 #

在cdkDropListDropped事件中，确保元素最终插入到计算好的索引位置（你已实现此功能，这里做再次确认）：

import { transferArrayItem, CdkDragDrop } from '@angular/cdk/drag-drop';

onDrop(event: CdkDragDrop<any[]>) {
  if (event.previousContainer !== event.container) {
    const draggedItem = event.item.data;
    const targetIndex = this.calculateTargetIndex(event.container.data, draggedItem);
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      targetIndex
    );
  }
}

注意事项 #

• 上述代码使用了Angular CDK的私有API（_dragRef、_insertPlaceholder），当前版本稳定可用，但后续版本更新可能存在变动。若想避免依赖私有API，可以结合cdkDropListSortPredicate始终返回false，阻止CDK自动排序，再通过上述方法手动控制占位符位置。
• 若必须保留cdkDropListSortingDisabled="false"，需确保sortPredicate的逻辑不会干扰自定义的占位符位置计算。

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