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

Question

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

将城市元素拖动到国家列表元素上方时，如何禁用目标国家列表中的排序或元素移位？谢谢！

frontend

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

我尝试了@Zammy 的答案，但遇到了一个问题，即元素没有显示但仍然取代了空间。这个解决方案对我有用，把它放在源列表项

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