Angular CDK Drag&Drop：拖拽期间保持列表顺序直至释放

当然可以搞定！Angular CDK Drag&Drop的灵活性刚好能满足你这个需求——让拖拽过程中所有列表元素位置保持不动，直到释放拖拽元素后再更新顺序。核心思路是隐藏默认的拖拽占位符，用自定义预览元素代替，只在拖拽结束时手动更新列表顺序，具体步骤如下：

1. 配置拖拽容器与拖拽项，隐藏默认占位符 #

默认情况下，CDK拖拽时会在原元素位置生成一个占位符，导致其他元素实时移位。我们可以通过自定义cdkDragPlaceholder将这个占位符隐藏，让原列表的元素位置保持不变。

2. 添加自定义拖拽预览 #

使用cdkDragPreview创建一个和原元素样式一致的预览组件，拖拽时用户看到的是这个预览元素，而非移动原列表里的元素。

3. 监听拖拽结束事件，手动更新列表顺序 #

只有当cdkDropListDropped事件触发（即用户释放拖拽元素）时，我们才调用CDK提供的moveItemInArray方法调整列表数组的顺序，此时页面上的元素才会更新位置。

完整代码示例 #

组件模板（HTML）

<div cdkDropList (cdkDropListDropped)="onDrop($event)" class="drop-list">
  <div 
    *ngFor="let item of items; let i = index" 
    cdkDrag 
    class="drag-item-wrapper"
  >
    <!-- 原列表元素，拖拽时位置保持不变 -->
    <div class="item">{{ item }}</div>

    <!-- 自定义拖拽预览：拖拽时显示的元素 -->
    <ng-template cdkDragPreview>
      <div class="item preview">{{ item }}</div>
    </ng-template>

    <!-- 隐藏默认占位符，避免原位置出现空位 -->
    <ng-template cdkDragPlaceholder>
      <div class="item placeholder"></div>
    </ng-template>
  </div>
</div>

样式（CSS）

.drop-list {
  width: 300px;
  padding: 1rem;
}

.item {
  padding: 1rem;
  border: 1px solid #e0e0e0;
  margin: 0.5rem 0;
  background: #fff;
  border-radius: 4px;
}

/* 拖拽预览添加阴影，增强视觉区分 */
.preview {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 隐藏默认占位符，让原列表元素位置看起来没变化 */
.placeholder {
  visibility: hidden;
  height: 0;
  margin: 0;
}

组件逻辑（TypeScript）

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

@Component({
  selector: 'app-static-drag-list',
  templateUrl: './static-drag-list.component.html',
  styleUrls: ['./static-drag-list.component.css']
})
export class StaticDragListComponent {
  items = ['任务A', '任务B', '任务C', '任务D', '任务E'];

  onDrop(event: CdkDragDrop<string[]>) {
    // 仅在释放拖拽元素后，才更新列表顺序
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

额外优化提示 #

• 如果需要让预览元素的位置更贴合鼠标，可以在cdkDragStarted事件中调整预览元素的偏移量；
• 若要禁用拖拽时的元素透明度变化，可以自定义cdkDrag的样式，或者修改cdk-drag-preview的默认样式。

内容的提问来源于stack exchange，提问作者Jędrek Markowski