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

Posted

技术标签:

【中文标题】如何在 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>

【讨论】:

以上是关于如何在 Angular 7 中禁用目标 cdkDropList 中的元素移动/移动的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 小吃店中禁用背景?

Angular 7在子路由更改上禁用滚动到顶部

如何在Angular 2中禁用浏览器后退按钮

如何在 Angular2 中禁用动态表单

如何在 iOS 7 App 中禁用 iCloud

如何在 Angular 6 中使用 HttpClient 禁用缓存