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

Question

我有 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>

Answer 1

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

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

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

Answer 2

您可以尝试添加自定义拖动占位符，然后隐藏它（display:none例如）。

在你的里面添加另一个元素，cdkDrag如下所示：

<div cdkDrag>
  <div *cdkDragPlaceholder style="display: none"></div>
</div>

提示：您可能需要在两个列表中执行此操作！