使用CdkDragDrop重排不同尺寸元素时出现闪烁问题

问题背景 #

使用Angular CDK DragDrop实现水平排序时，若容器高度大于元素自身高度，且元素宽度不一致，拖拽过程中会出现明显闪烁，宽度较大的元素会快速在布局中左右跳转。尝试cdkDropListSortPredicate无法解决，该问题覆盖Angular 12至17版本。

可行解决方案 #

1. 对齐容器与元素高度 #

容器高度过大是触发误排序检测的核心原因之一，将容器高度限制为与元素高度一致，缩小拖拽判定的有效区域：

.cdk-drop-list {
  height: fit-content;
  /* 若元素为固定高度，也可直接设置为对应值，例如 height: 40px; */
}

2. 精准控制拖拽占位符样式 #

默认占位符的尺寸偏差会导致布局跳动，自定义占位符样式使其完全匹配拖拽元素的尺寸：

.cdk-drag-placeholder {
  width: var(--drag-item-width);
  height: 100%;
  opacity: 0.6;
}

在组件中监听拖拽开始事件，动态注入当前元素宽度：

onDragStart(event: CdkDragStart) {
  const dragElWidth = event.source.element.nativeElement.offsetWidth;
  document.documentElement.style.setProperty('--drag-item-width', `${dragElWidth}px`);
}

模板中绑定事件：

<div cdkDrag (cdkDragStarted)="onDragStart($event)">{{ item }}</div>

3. 手动接管排序逻辑 #

绕过默认的自动排序检测，通过cdkDropListDropped事件手动计算插入位置，基于鼠标水平偏移判定：

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer !== event.container) return;

  const containerRect = event.container.element.nativeElement.getBoundingClientRect();
  const dropX = event.event.clientX - containerRect.left;
  const items = event.container.data;
  let insertIndex = items.length;

  // 遍历元素，根据元素中心点判断插入位置
  items.forEach((_, index) => {
    const itemEl = event.container.getItemAt(index).element.nativeElement;
    const itemRect = itemEl.getBoundingClientRect();
    const itemCenterX = itemRect.left - containerRect.left + itemRect.width / 2;
    
    if (dropX < itemCenterX) {
      insertIndex = index;
    }
  });

  moveItemInArray(items, event.previousIndex, insertIndex);
}

模板中禁用默认排序：

<div cdkDropList 
     [cdkDropListData]="items" 
     (cdkDropListDropped)="drop($event)"
     [cdkDropListSortPredicate]="() => false">
  <!-- 拖拽元素 -->
</div>

4. 缩小拖拽触发区域 #

将拖拽触发逻辑限制在元素内部，避免容器空白区域的误触发：

<div cdkDropList [cdkDropListData]="items" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of items" class="item-wrapper">
    <div cdkDrag>{{ item }}</div>
  </div>
</div>

样式上确保拖拽元素占满容器：

.item-wrapper {
  display: inline-block;
}
.cdk-drag {
  width: 100%;
  cursor: grab;
}

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