使用 Angular 7 Material CDK 拖放答案

【问题标题】：drag and drop with Angular 7 Material CDK使用 Angular 7 Material CDK 拖放
【发布时间】：2019-05-05 20:24:32
【问题描述】：

我需要在 Angular 7 中实现拖放。我将有多个容器用于丢弃。我面临的问题是，如果我将一个项目拖到一个放置容器上，然后放到下面的容器中，它就会被放置在第一个容器中。

在上面的示例中，我想将一个项目从 To Do 移动到 Done list 2 。但是，如果我将项目拖到完成列表 1 上并放入完成列表 2，它会被放到完成列表 1 本身。

【问题讨论】：

这很不寻常。看起来你可以将它从 To Do 拖到 Done list 2，但你不能在中途触摸 Done List 1。这也适用于 To Do -> Done list 2 -> done list 1.
很可能是因为：当它触及完成列表 1 时，它将成为其中的成员，然后（如您所定义的）您无法从完成列表 1 转移到完成列表 2。
我错过了这一点“如果您有未知数量的连接下拉列表，您可以使用 cdkDropListGroup 指令自动设置连接。请注意，在组下添加的任何新 cdkDropList 都会自动连接到所有其他设备。”文档：material.angular.io/cdk/drag-drop/overview#attaching-data

【解决方案1】：

我可以通过更改 cdkDropListConnectedTo 属性值来解决此问题。

【讨论】：