Angular CDK嵌套拖拽列表问题：无法将问题拖拽至章节容器

嘿，我来帮你排查这个嵌套拖拽的问题～从你的描述来看，核心问题应该是多层嵌套的拖拽容器之间的连接关系没配置对，或者外层的模块/章节拖拽容器干扰了内层问题的拖拽检测。咱们一步步来解决：

问题根源分析 #

当你同时启用模块、章节、问题的拖拽时，Angular CDK需要明确知道每个拖拽容器（cdkDropList）能接收哪些拖拽项。如果章节的问题容器没有正确和左侧的问题列表建立连接，或者外层容器的拖拽逻辑覆盖了内层，就会出现“拖不进去”的情况。而当你关掉外层拖拽时，内层的连接逻辑自然就生效了，所以问题能正常移动。

具体解决方案 #

1. 给每个层级的容器配置独立的拖拽规则

首先，确保每个章节内部都有自己的cdkDropList容器，用来接收问题。同时，把所有需要互相拖拽的容器（左侧问题列表 + 所有章节的问题容器）放到同一个cdkDropListGroup里，让CDK自动处理连接关系。

2. 拆分不同层级的拖拽事件处理函数

模块、章节、问题的拖拽逻辑是独立的，不能共用同一个drop函数，否则会导致数据更新混乱。

修正后的示例代码

假设你的数据结构大概是这样（你可以根据实际情况调整）：

// 组件内的数据定义
modules = [
  {
    name: "模块1",
    sections: [
      { name: "章节1", questions: [] },
      { name: "章节2", questions: [] }
    ]
  },
  {
    name: "模块2",
    sections: [{ name: "章节3", questions: [] }]
  }
];
filteredQuestions = [
  { Pregunta: "问题1" },
  { Pregunta: "问题2" },
  { Pregunta: "问题3" }
];

模板部分：

<div cdkDropListGroup>
  <!-- 左侧问题列表容器 -->
  <div class="example-container" 
       cdkDropList 
       [cdkDropListData]="filteredQuestions" 
       (cdkDropListDropped)="dropQuestionInList($event)">
    <h2>Preguntas</h2>
    <div class="example-list" id="questions">
      <div class="example-box" *ngFor="let item of filteredQuestions" cdkDrag>
        {{ item.Pregunta }}
      </div>
    </div>
  </div>

  <!-- 右侧生成的卡片（模块+章节） -->
  <div class="example-container">
    <h2>Ficha Generada</h2>
    <!-- 模块拖拽容器 -->
    <div cdkDropList 
         [cdkDropListData]="modules" 
         (cdkDropListDropped)="dropModule($event)"
         class="modules-container">
      <!-- 遍历模块 -->
      <div *ngFor="let module of modules" class="module-box" cdkDrag>
        <h3>{{ module.name }}</h3>
        <!-- 章节拖拽容器 -->
        <div cdkDropList 
             [cdkDropListData]="module.sections" 
             (cdkDropListDropped)="dropSection($event)"
             class="sections-container">
          <!-- 遍历章节 -->
          <div *ngFor="let section of module.sections" class="section-box">
            <h4>{{ section.name }}</h4>
            <!-- 章节内的问题接收容器（关键！） -->
            <div cdkDropList 
                 [cdkDropListData]="section.questions" 
                 (cdkDropListDropped)="dropQuestionIntoSection($event)"
                 class="section-questions">
              <div class="example-box" *ngFor="let q of section.questions" cdkDrag>
                {{ q.Pregunta }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

组件内的拖拽处理函数：

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

// 问题在左侧列表内排序
dropQuestionInList(event: CdkDragDrop<any[]>) {
  moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}

// 拖拽模块排序
dropModule(event: CdkDragDrop<any[]>) {
  moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}

// 拖拽章节排序
dropSection(event: CdkDragDrop<any[]>) {
  moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}

// 把问题拖进章节
dropQuestionIntoSection(event: CdkDragDrop<any[]>) {
  if (event.previousContainer === event.container) {
    // 同一章节内排序
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    // 从左侧列表或其他章节转移问题
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

关键注意点 #

• 所有需要互相拖拽的cdkDropList必须在同一个cdkDropListGroup下，这样CDK才能自动识别可拖拽的目标。
• 每个层级的拖拽事件处理函数要分开，避免数据更新时混淆不同层级的数组。
• 给章节内的问题容器加上明显的样式（比如边框、背景色），既方便用户识别，也能确保CDK的拖拽检测不会因为容器过于隐蔽而失效。

备注：内容来源于stack exchange，提问作者patricio paz