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

问题描述

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

I have 2 list (capital cities in the left and countries on the right). I would like to be able to move the capital city on the countries list, and allow the user to drop the capital city on the country. The issue is that the country list elements start moving/shifting (to allow for inserting the capital). But I want just to drop on top and if it is a match, provide a message and remove the city+country from both lists.

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

How can I disable the sorting or element shifting in target countries list when I am dragging the city element over the country list elements? Thx!

<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规则

You can add a CSS rule to the .cdk-drag-placeholder class like this

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

注意：这也会影响您拖拽它的列表，所以您可能想要更具体地将您放入的容器

Note: This will affect the list you are draggin it from too, so you might want to get more specific to the container you are dropping it into

这篇关于如何在Angular 7中的目标cdkDropList中禁用元素移动/移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！