我想让这个https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg可拖动并保存到 json 文件，所以我可以查看数据，我使用了 angular cdk 但我我被困在这个函数中

我找不到要替换的变量this.items，有人可以帮我吗？当然我想将数据存储到 json 文件

我基于此https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg创建表单构建器，并且我使用此功能删除

必须questionTitle改变，但事实并非如此

但在 html 中它正在改变

数组的顺序在 html 中发生了变化，但在我的 json 中没有改变，有人可以帮助我吗？

编辑

过了一会儿我不再碰这个代码，我发现了一些错误，请看之前和之后的图像，这里是之前

在我拖动第一个表单后，它看起来像这样

实际上有什么问题？我已经尝试了你们提供的两种最佳解决方案，但仍然是这样，请帮帮我。注意：我将 surverysQuestions 更改为 quizQuestions

我有一个基于这个 stackblitz 的组件：https ://stackblitz.com/edit/angular-5mf7hl

当我尝试交换列表中的元素时出现问题。我希望数组项交换位置。在上面的 stackblitz 示例中，当目标 listItem 被 sourceItem 替换时，它会在列表中的预览期间被向前或向后推送。通过在这个 StackOverflow 问题中从 Shinjo 借用一些代码，我设法让它们交换位置：Angular 7 drag Drop swapping elements

交换本身很完美，但是，当我将一个列表项拖到另一个列表项上时，预览不正确。当您释放时，它会自行更正，并且 listItem 会出现在数组中的正确位置。我想要的是，在放开拖动的项目之前，源列表项和目标列表项在预览期间交换位置。您可以查看上面的 stackblitz 以直观地看到问题。

应用组件.ts

App.component.html

App.component.css

这就是我遇到的情况，我需要使用 Angular 的 mat-table 和 cdkDragDrop（使用 Angular 8）制作一个列拖放功能。

这是我到目前为止所拥有的。

在 component.html 里面我有：

在 component.ts 里面我有：

这只是我设法在互联网上找到的一个简单的测试代码我发现的 stackblitz 示例 问题是，我无法设法让线路(cdkDropListDropped)="drop($event)"在 ts 中的“drop”函数中触发事件。我尝试了没有表格的功能并且它正在工作，它正在触发事件（和“drop”功能），但是在表格内部，它不起作用。

我想知道你们中是否有人遇到过类似的问题，以及您是否设法解决了这个问题。

我想使用 Observable 作为材质拖放的数据源，但我现在正在苦苦挣扎。基本上，我在看板中有一个泳道列表，每个泳道都有一堆我想移动的项目。当我移动一个项目时，我也想更新后端。多人也将更新同一个看板，所以我也想使用 socket.io 来自动移动项目（出于同样的原因，我也在为此苦苦挣扎）

这是模板：

这是组件代码：

这是我尝试使用可观察对象作为数据源的堆栈闪电战。您可以看到它正确加载了通道，但是当您尝试移动其中一个项目时，它会消失。有任何想法吗？

在我的实际应用程序中，我从 API 请求中接收值。所以它会自动作为一个 Observable 进来。然后我闯入一个本地基本数组并取消订阅 Observable。然后我从本地基础数组创建一个新的 Observable 并对本地基础数组进行更改，希望这些更改会反映在拖放中。但这目前不起作用。

很高兴编写我自己的移动功能，但没有反映可观察数据源更改的车道，我无法让它工作。

我发布这个问题只是为了自己回答，以防有人像我一样挣扎！

我正在开发一个 Angular 项目来实现类似 Trello 的应用程序。我希望能够将一个元素从一个列表拖到另一个列表中，因此我安装了 Angular cdk 模块并按照他们的指南进行操作。

注意：我的应用程序分为几个页面/组件，我正在实现该接口（Trello）的页面被称为BoardPageComponent。

首先，我添加了cdkDrag指令，元素变得可拖动，这是一个好的开始！

然后我将cdkDropList指令添加到父元素中，子元素仍然可以拖动，但它们的样式在拖动时不再起作用！

解决方案

在 acdkDropList中拖动元素时，DragAndDropModule会创建该元素的克隆，但位于文档的正文级别。因此，如果您的组件被封装，那么它的样式将不适用！

解决方案 1：一种快速的解决方案是移动该可拖动元素的样式并将其放入全局样式文件中。

解决方案 2：另一种解决方案是禁用该组件的封装ViewEncaplusation.None：

这会起作用，但您应该知道这可能会将某些样式泄漏到应用程序的其他组件中。所以一定要手动封装组件的样式。

或者也许还有另一种方式？

这个问题在 SO 上已经被多次提出，但不是最近，而且这里的例子比我见过的其他例子更完整。使用材质树进行拖放的最佳实现是@inorganik在媒体上发布的这个。

我在这里克隆了 StackBlitz。

但是，我的问题是，如果节点上至少有一个子元素，则只能移动节点。例如，如果您从 Application 中删除所有子节点，然后尝试将其添加回 Application。

如果节点有兄弟节点，则删除的节点只会插入到父节点中，第 232 行：

在我看来，解决方案是跟踪用户是否将移动的节点悬停在另一个节点上，然后假设用户想要将悬停的节点设为父节点，这对我来说似乎是合乎逻辑的，请参阅屏幕截图：

我的问题是：这是解决这个问题的最好方法吗？如果是这样，如何使用 Angular Drag Drop CDK 跟踪悬停的节点？

更新：

我已经让这个功能部分工作了。我在这里更新了 StackBlitz。

我根据 mat-tree DnD 的其他实现更新了该dragHover方法，我发现它根据用户将悬停的节点向右拖动多远来设置插入模式：

我将此添加到drop方法中。如果dragNodeInsertToParent是true，则找到放置目标节点的索引，并将节点推送到其子数组中。

现在，如果您将节点拉出足够远的右侧，则会触发插入模式，您可以将子节点添加回空的父节点：

无论如何，仍在努力，如果有人有任何想法让这项工作更直观，请发表评论。

我正在尝试将项目拖到两个列表中。底部列表是典型的排序列表（如“库存”），但我希望顶部项目未排序且可放置在任何地方（如“游戏板”）。

我让它大部分工作，但是当放入顶部框时 event.currentIndex 始终为 0。但是当从那里拖出时，我得到不同的 event.previousIndex 值，这意味着模型和 DOM 元素并不总是匹配。

这是一个堆栈闪电战，显示了我的意思。将一些项目拖到顶部框中并使用它，您会注意到有时移动了错误的项目。

当您以相反的顺序进行交互时，这一点最为显着，例如：

1. 将项目“一”、“二”、“三”拖到顶部框中（按此顺序）
2. 尝试将项目“三”、“二”、“一”放回底部盒子（按此顺序）

我必须错过一些非常简单的东西，但经过一个小时的斗争，我想我需要寻求帮助。我正在尝试遵循在 Angular 站点上设置 cdkDragBoundary 的简单示例。cdkDrag 按预期工作，但忽略边界。我检查了 package.json 以确保所有依赖项都是最新的，我相信它们是最新的。谁能让我知道我错过了什么？

https://spuzzler.stackblitz.io

I use angular material cdk drag and drop on my project, first i create element dynamically and then i drag it and drop on any position on my screen.

When i create 2 divs and drag div on div, is there is a way to know when the div dropped on other div ?

I want when div is inside div to color the append div in other color.

Thanks