如何在 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 中的元素移动/移动的主要内容,如果未能解决你的问题,请参考以下文章