Angular CDK 11/14嵌套拖拽问题：如何恢复v7版本的拖拽功能？

问题背景 #

在Angular CDK v7中，cdkDropList的拖拽元素内部嵌套另一个cdkDrag可以正常工作，但升级到v11或v14版本后，内部的嵌套拖拽元素无法触发拖拽。

原模板代码：

<div class="example-container">
  <h2>Draggable items inside elements of a cdkDropList</h2>
  <div
    cdkDropList
    [cdkDropListData]="items"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
  >
    <div class="example-box" *ngFor="let item of items" cdkDrag>
      <div class="example-drag" cdkDrag cdkDragBoundary=".example-box">
        {{ item }}
      </div>
    </div>
  </div>
</div>

原drop事件处理代码：

drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      console.log('Transfering item to new container');
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

原因分析 #

Angular CDK从v8开始调整了拖拽事件的处理逻辑：父级cdkDrag会默认阻止子级cdkDrag的拖拽事件冒泡，以此避免嵌套拖拽场景下的事件冲突，但这直接导致子级拖拽元素无法触发自身的拖拽逻辑。

解决方案 #

通过以下两种方式可以恢复嵌套拖拽的正常功能，推荐使用第一种方案：

方案1：给父级cdkDrag添加拖拽手柄（推荐） #

为父级拖拽元素指定专属的拖拽触发区域（cdkDragHandle），让父级拖拽仅在点击手柄时生效，不干扰子级拖拽事件：

<div class="example-container">
  <h2>Draggable items inside elements of a cdkDropList</h2>
  <div
    cdkDropList
    [cdkDropListData]="items"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
  >
    <div class="example-box" *ngFor="let item of items" cdkDrag>
      <!-- 父级拖拽触发手柄，仅点击此区域会触发父级拖拽 -->
      <div class="example-box-handle" cdkDragHandle>
        父级拖拽区域
      </div>
      <!-- 子级拖拽元素，现在可正常触发拖拽 -->
      <div class="example-drag" cdkDrag cdkDragBoundary=".example-box">
        {{ item }}
      </div>
    </div>
  </div>
</div>

方案2：阻止子级拖拽事件向父级冒泡 #

如果不需要父级拖拽的全局触发，可以在子级拖拽元素上阻止鼠标/触摸事件冒泡，避免父级cdkDrag拦截事件：

<div class="example-drag" 
     cdkDrag 
     cdkDragBoundary=".example-box"
     (mousedown)="$event.stopPropagation()"
     (touchstart)="$event.stopPropagation()">
  {{ item }}
</div>

额外说明 #

• 若不需要父级拖拽功能，直接移除父级的cdkDrag指令，子级拖拽会自动恢复正常。
• 确保cdkDragBoundary的选择器准确，避免子级拖拽超出预期范围。

内容的提问来源于stack exchange，提问作者Florian. C