Angular Material拖拽：CSS过渡后触发回调及元素跳转问题

1. 临时更新本地模型，消除元素跳转 #

核心思路是拖拽释放后立即更新本地数组顺序，让UI即时响应，再异步请求服务器，根据响应结果决定保留变更还是回滚：

• 拖拽前保存数组的原始状态，用于请求失败时回滚
• 在cdkDropListDropped事件中，先根据拖拽的previousIndex和currentIndex临时调整数组顺序
• 发送请求到服务器，成功则维持当前状态；失败则恢复数组到原始状态，并提示用户

示例代码：

// 组件类中
originalItems: any[] = []; // 保存原始数组备份

ngOnInit() {
  this.loadItems(); // 从服务器加载初始数据，同时赋值给originalItems
}

loadItems() {
  this.apiService.getItems().subscribe(data => {
    this.items = [...data];
    this.originalItems = [...data];
  });
}

onDrop(event: CdkDragDrop<any[]>) {
  // 1. 先临时更新本地数组，让UI立即变化
  const movedItem = this.items.splice(event.previousIndex, 1)[0];
  this.items.splice(event.currentIndex, 0, movedItem);
  
  // 2. 发送服务器请求
  this.apiService.updateItemOrder(this.items).subscribe({
    next: () => {
      // 请求成功，更新原始备份
      this.originalItems = [...this.items];
    },
    error: () => {
      // 请求失败，回滚数组
      this.items = [...this.originalItems];
      alert('排序更新失败，已恢复原顺序');
    }
  });
}

2. 让回调在鼠标释放时立即触发 #

Angular CDK的cdkDropListDropped默认会等待拖拽动画结束后触发，若要在鼠标释放时立即执行逻辑，可以改用cdkDrag的dragEnded事件，结合cdkDropList的getSortedItems()方法获取当前拖拽后的顺序：

示例代码：

// 模板中
<div cdkDropList (cdkDropListSorted)="onSorted($event)">
  <div *ngFor="let item of items" cdkDrag (dragEnded)="onDragEnded($event)">
    {{ item.name }}
  </div>
</div>

// 组件类中
currentSortedItems: any[] = [];

onSorted(event: CdkDropListSortEvent) {
  // 实时获取排序后的数组
  this.currentSortedItems = event.container.items.map(item => item.data);
}

onDragEnded(event: CdkDragEnd) {
  // 鼠标释放时立即触发
  if (this.currentSortedItems.length === 0) return;
  
  // 临时更新本地数组
  this.items = [...this.currentSortedItems];
  
  // 发送服务器请求，逻辑同前
  this.apiService.updateItemOrder(this.items).subscribe({
    next: () => {
      this.originalItems = [...this.items];
    },
    error: () => {
      this.items = [...this.originalItems];
      alert('排序更新失败');
    }
  });
}

3. 优化动画体验（可选） #

本地即时更新模型后，CDK的默认拖拽动画会正常执行，无需修改.cdk-drag-animating的过渡时长。若要自定义动画，可覆盖CDK的默认样式：

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

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