Angular CDK DragDrop：如何配置列表拖拽规则并限制跨列表拖拽

你的核心问题是没有针对不同列表分别配置连接关系，且缺少拖拽行为的拦截逻辑。下面是具体的解决步骤：

1. 动态配置cdkDropListConnectedTo #

你当前给所有循环生成的列表都设置了相同的connectedTo，导致list3也和list1/list2建立了连接。需要根据列表ID动态设置连接目标：

<div cdkDropListGroup>
  <div *ngFor="let sectionData of TableSectionsData"
       cdkDropList
       [id]="sectionData.id"
       [cdkDropListData]="sectionData.relatedFieldsList"
       (cdkDropListDropped)="drop($event)"
       <!-- 动态匹配连接目标 -->
       [cdkDropListConnectedTo]="getConnectedLists(sectionData.id)"
       table-section
       [sectionData]="sectionData"
       (removeField)="removeField($event,sectionData.sectionType)">
  </div>
</div>

在组件类中实现getConnectedLists方法：

getConnectedLists(currentId: string): string[] {
  if (currentId === 'list-3') {
    // list3仅允许内部拖拽，只连接自身
    return [currentId];
  } else {
    // list1和list2互相建立连接
    return currentId === 'list-1' ? ['list-2'] : ['list-1'];
  }
}

2. 添加拖拽拦截逻辑（可选但更严谨） #

为了彻底禁止list3与其他列表的双向拖拽，可使用cdkDropListPredicate拦截不符合规则的拖拽行为：

先在模板中添加该属性：

<div cdkDropListGroup>
  <div *ngFor="let sectionData of TableSectionsData"
       cdkDropList
       [id]="sectionData.id"
       [cdkDropListData]="sectionData.relatedFieldsList"
       (cdkDropListDropped)="drop($event)"
       [cdkDropListConnectedTo]="getConnectedLists(sectionData.id)"
       <!-- 新增拖拽拦截规则 -->
       [cdkDropListPredicate]="dropListPredicate"
       table-section
       [sectionData]="sectionData"
       (removeField)="removeField($event,sectionData.sectionType)">
  </div>
</div>

然后在组件类中实现dropListPredicate方法：

dropListPredicate(item: CdkDrag<any>, target: CdkDropList<any>): boolean {
  const itemSourceId = item.dropContainer.id;
  const targetId = target.id;

  // 规则1：list3的元素只能拖入list3
  if (itemSourceId === 'list-3' && targetId !== 'list-3') {
    return false;
  }
  // 规则2：非list3的元素不能拖入list3
  if (targetId === 'list-3' && itemSourceId !== 'list-3') {
    return false;
  }
  // list1与list2之间的拖拽允许通过
  return true;
}

为什么之前的方法无效？ #

• 你给所有列表都设置了[cdkDropListConnectedTo]="['list-1', 'list-2']"，包括list3，这意味着list3仍会和list1/list2建立连接，自然无法阻止向外拖拽。
• cdkDropListEntered/cdkDropListExited仅监听元素进入/离开列表的事件，本身没有拦截拖拽的能力，需要配合cdkDropListPredicate实现规则校验。

内容的提问来源于stack exchange，提问作者Ortal Blumenfeld Lagziel