角CDKDragDrop -如何防止将项目从一个列表拖到另一个列表

Question

如何防止将项目从一个列表拖到另一个列表？

我有3个列表，我希望允许用户从list1拖放到list2，而不是从列表3中的\拖到list3，我只想在列表本身中启用拖放(重新排序列表中的项目)

我尝试使用[cdkDropListConnectedTo]="['list-1', 'list-2']"，但它仍然可以从列表3中拖动

我也尝试使用(cdkDropListEntered)="enterd($event)" (cdkDropListExited)="exit($event)"

但是我不认为有一种预防性的方法来检查是否允许拖放

<div cdkDropListGroup>
        <div *ngFor="let sectionData of TableSectionsData"
             cdkDropList
             [cdkDropListData]=sectionData.relatedFieldsList
             (cdkDropListDropped)="drop($event)"
             (cdkDropListEntered)="enterd($event)"
             (cdkDropListExited)="exit($event)"
             [cdkDropListConnectedTo]="['list-1', 'list-2']"
             table-section
             [id]=sectionData.id
             [sectionData]="sectionData"
             (removeField)="removeField($event,sectionData.sectionType)">
        </div>
</div>

Answer 1

我已经准备了一个例子，它完全符合你的需要。

我希望这对你有用

stackblitz

请注意，cdkDropListConnectedTo既可以直接引用另一个cdkDropList，也可以引用另一个放置容器的id：