如何在 Angular 7 中禁用目标 cdkDropList 中的元素移位/移动

我有 2 个列表（左侧的首都城市和右侧的国家/地区）。我希望能够将首都移至国家列表中，并允许用户将首都移至该国家/地区。问题是国家/地区列表元素开始移动/移动（以允许插入大写字母）。但我只想放在顶部，如果匹配，请提供一条消息并从两个列表中删除城市+国家/地区。

当我将城市元素拖动到国家/地区列表元素上时，如何禁用目标国家/地区列表中的排序或元素移动？谢谢！

<div cdkDropList
     [cdkDropListData]="capitals"
     #capitalsList="cdkDropList"
     [cdkDropListConnectedTo]="countryList">
  <div cdkDrag
       (cdkDragReleased)="onDragReleased($event)"
       cdkDragBoundary=".row"
       class="bg-info text-center border p-2"
       *ngFor="let capital of capitals">{{ capital }}
  </div>
</div>


<div cdkDropList
     cdkDropListDisabled
     [cdkDropListData]="countries"
     #countryList="cdkDropList"
     [cdkDropListConnectedTo]="capitalsList"
     (cdkDropListDropped)="onDropListDropped($event)">
  <div cdkDrag
       cdkDragDisabled
       class="text-center border p-2"
       *ngFor="let country of countries">{{ country }}
  </div>
</div>

您可以像这样向 .cdk-drag-placeholder 类添加 CSS 规则

.cdk-drag-placeholder {
display:none;
}

注意：这也会影响您从中拖动它的列表，因此您可能需要更具体地了解要将其放入其中的容器