Angular自定义多选下拉框CDK拖拽排序问题求助

针对你遇到的两个拖拽问题，以下是具体的排查和解决思路：

1. 拖拽后项目总是到索引0的修复 #

这个问题通常源于拖拽事件处理逻辑错误或数据源绑定异常：

• 使用CDK官方工具函数处理数组移动：避免手动操作数组索引，改用@angular/cdk/drag-drop提供的moveItemInArray函数，它会自动处理数组元素的位置调整，确保索引计算准确。示例代码：

  import { moveItemInArray } from '@angular/cdk/drag-drop';
  
  drop(event: CdkDragDrop<YourItemType[]>) {
    moveItemInArray(this.selectedItems, event.previousIndex, event.currentIndex);
  }
  

• 确认数据源绑定正确性：检查cdkDropList的[cdkDropListData]是否直接绑定到已选项目数组（比如selectedItems），不要在拖拽过程中对数组重新赋值（如this.selectedItems = [...newArray]会打断CDK对数组的引用追踪），确保操作的是原数组的引用。

2. 占位符静态不移动的修复 #

占位符无法跟随拖拽移动，大多是样式或指令使用问题：

• 正确使用cdkDragPlaceholder：在拖拽项模板内添加占位符指令，确保占位符属于拖拽列表的一部分。示例模板代码：

  <div cdkDrag *ngFor="let item of selectedItems">
    <div *cdkDragPlaceholder class="drag-placeholder"></div>
    {{ item.label }}
  </div>
  

• 添加占位符基础样式：给占位符设置透明样式避免遮挡，同时确保拖拽预览和占位符的布局与原项目一致：

  .drag-placeholder {
    opacity: 0;
    height: 32px; /* 和你的拖拽项高度匹配 */
    width: 100%;
  }
  .cdk-drag-preview {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 8px;
    background: white;
  }
  

• 检查列表容器布局：确保cdkDropList的容器使用正确布局（比如垂直列表用display: flex; flex-direction: column;），没有固定定位或溢出隐藏的样式干扰占位符的位置计算。

内容的提问来源于stack exchange，提问作者Carsten Løvbo Andersen