Angular拖拽模块：让cdk-drop-list-receiving覆盖列表且不打乱原排序

我来帮你搞定这两个头疼的问题：让接收区域覆盖整个列表高度，以及拖拽项放回原列表时精准回到原位。

一、修复接收区域仅在顶部的问题 #

这个问题大概率是你的cdkDropList容器高度没有正确适配子项，导致cdk-drop-list-receiving的高亮区域只能局限在顶部。

1. 调整容器样式 #

给父容器设置自适应高度，同时让接收状态的样式继承容器高度：

/* 父容器基础样式 */
.drop-list-container {
  display: block;
  min-height: fit-content; /* 自动适配所有子项高度 */
  padding: 8px;
  background-color: #f5f5f5;
}

/* 接收拖拽时的高亮样式 */
.drop-list-container.cdk-drop-list-receiving {
  background-color: yellow; /* 你的黄色高亮 */
  min-height: inherit; /* 继承父容器高度，确保覆盖整个列表 */
}

/* 拖拽项样式 */
.drag-item {
  padding: 14px;
  margin: 8px 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

2. 梳理容器结构 #

确保cdkDropList直接包裹*ngFor生成的拖拽项，不要在中间嵌套多余容器（比如额外的div），避免高度计算异常：

<div class="drop-list-container" 
     cdkDropList 
     [cdkDropListData]="sourceList"
     (cdkDropListDropped)="onDrop($event)">
  <!-- 直接在这里生成拖拽项，不要嵌套额外容器 -->
  <div class="drag-item" 
       *ngFor="let item of sourceList; let i = index" 
       cdkDrag>
    {{ item.name }}
  </div>
</div>

二、实现拖拽项放回原列表时回到原位置 #

要做到这一点，我们需要记录拖拽项的原始索引，在拖回原列表时将它插回最初的位置。

1. 记录原始索引 #

在拖拽开始时，获取当前项的原始位置：

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

private originalDragIndex: number;

// 拖拽开始时触发
onDragStart(event: CdkDragStart) {
  this.originalDragIndex = event.source.getIndex();
}

2. 处理拖拽结束逻辑 #

在cdkDropListDropped事件中，判断是否拖回原列表，如果是就把项插回原始索引：

onDrop(event: CdkDragDrop<any[]>) {
  // 判断是否拖回原列表
  if (event.previousContainer === event.container) {
    // 如果当前位置和原始位置不同，强制插回原位置
    if (event.currentIndex !== this.originalDragIndex) {
      const draggedItem = event.container.data.splice(event.currentIndex, 1)[0];
      event.container.data.splice(this.originalDragIndex, 0, draggedItem);
    }
  } else {
    // 跨列表拖拽，用官方方法处理数据转移
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

3. 模板绑定事件 #

把事件绑定到拖拽项和容器上：

<!-- 原列表 -->
<div class="drop-list-container" 
     cdkDropList 
     [cdkDropListData]="sourceList"
     (cdkDropListDropped)="onDrop($event)">
  <div class="drag-item" 
       *ngFor="let item of sourceList; let i = index" 
       cdkDrag
       (cdkDragStarted)="onDragStart($event)">
    {{ item.name }}
  </div>
</div>

<!-- 目标列表示例 -->
<div class="drop-list-container" 
     cdkDropList 
     [cdkDropListData]="targetList"
     (cdkDropListDropped)="onDrop($event)">
  <div class="drag-item" 
       *ngFor="let item of targetList; let i = index" 
       cdkDrag>
    {{ item.name }}
  </div>
</div>

额外优化：禁止原列表内排序 #

如果你希望原列表里的拖拽完全不改变顺序，可以给原列表加cdkDropListSortingDisabled="true"，这样拖拽时项会自动弹回原位置，省掉索引处理的逻辑：

<div class="drop-list-container" 
     cdkDropList 
     [cdkDropListData]="sourceList"
     [cdkDropListSortingDisabled]="true"
     (cdkDropListDropped)="onDrop($event)">
  <!-- 拖拽项 -->
</div>

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