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

Posted 2023-05-08

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

【英文标题】：How to disable element shifting/moving in target cdkDropList in Angular 7

【发布时间】：2019-05-29 07:55:09

【问题描述】：

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

【参考方案1】：

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

.cdk-drag-placeholder 
display:none;

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

【讨论】：

您可能需要添加!important，否则元素上的现有样式可能会胜出。这发生在我身上，例如当我有一个display: flex 元素时。

感谢您的解决方案。节省了我的时间。

【参考方案2】：

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

在cdkDrag 中添加另一个元素，如下所示：

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

提示：您可能需要在两个列表中都这样做！

【讨论】：

当我这样做时，被拖动的项目首先飞到最左边的角落，然后下降到该位置。 @Zammy

【参考方案3】：

我尝试了@Zammy 的答案，但遇到了一个问题，即元素没有显示但仍然置换了空间。通过将其放在源列表项上，此解决方案对我有用

<div *cdkDragPlaceholder style="height: 0px"></div>