问题标签 [angular-cdk-drag-drop]

我正在尝试使用 CdkDragDrop 重新排序托管在 CdkPortal 窗口中的列表，但它不起作用。

HTML：

打字稿：

这是显示问题的 StackBlitz。

https://stackblitz.com/edit/angular-open-window-g5stn3?file=src%2Fapp%2Fwindow.component.ts

在页面中，您可以看到一个列表...此列表可以通过拖放重新排序。

现在单击“打开我”按钮，然后尝试拖动以重新排序相同的列表（我无法获得其中的样式，但它是相同的代码）它不会重新排序。

使用角度材料 cdk 的拖放功能，我想为每个 json 元素实现 drop ara

html

ts

首次加载：

拖放后：

拖放工作正常，但我需要以不同的方式进行。我需要将区域从“completed.name”删除到特定键。如果有任何东西从“待办事项”拖放到放置区域，它应该将类别添加到该特定键。这意味着我需要每个标签“名称”应该有一个放置区域部分到该特定名称

例如，如果我将应用程序开发拖放到“ios”旁边，该应用程序开发将添加到名称为“ios”的 json

并且放置区域和标签应该并排，如下所示

删除完成后的输出json应该是：

如何从垫子菜单或子菜单拖放到部分。你可以检查：Stackblitz

垫菜单的 HTML 代码：

你能解释一下为什么我这样做，为什么我将对象与另一个我知道总是正确的对象进行比较，因为需要像布尔值或数字或字符串这样的变量？

我找不到任何关于如何使用 cdk 拖放来获取放置元素的目标的文档。下面是将项目从box1 div 拖动到Shoppingbasket div 的示例代码。这里我期望目标应该是box2 div。但我收到Shoppingbasket div.here 是 stackblitz 示例

HTML

TS

我在下面发布了我的代码。我正在使用角度 DragDropModule 并且由于某种原因[cdkDragFreeDragPosition]无法正常工作。它给了我如下所示的错误。我将 DragDropModule 添加到我的 ngModule 中，如下所示。当我删除[cdkDragFreeDragPosition]标签时，拖放工作正常，但一旦添加它就会给我如下所示的错误。[cdkDragStartDelay]="1000"也给出了同样的错误。我不知道为什么会出现这个问题。试图在网上找到解决方案，但不能。任何帮助，将不胜感激。

我查看@angular/cdk了拖放示例，几乎所有这些示例都用于对列表进行排序并在不同列表中拖动项目。

我正在尝试实现一种文件文件夹类型的行为，其中您有一个项目列表（每个项目指定为文件或文件夹），您可以将列表中的一个或多个文件项拖放到同一个列表中的文件夹项目......它会移入其中（当然由 API 调用处理）。

因此，常规排序实现将不起作用（可排序列表中的项目在悬停时移开）。

我通过了一些关于 SO 的问题，了解到每个项目都需要标记为cdkDropList. 所以，这是我到目前为止的实现：

但是，事件数据仅包含有关被拖动项目（文件项目）的信息。在下面的代码中event.previousContainer.data，event.container.data和itemall 指的是同一个对象——被删除的文件项。

谁能告诉我这里到底出了什么问题？谢谢。

编辑：这是 stackblitz 的复制品：https ://stackblitz.com/edit/angular-ivy-edaftg

ngbDropdown单击菜单项时不关闭。它的工作正常外侧cdkdragdiv 但不在 cdkdrag 内。我尝试删除 cdkDrag 然后它工作正常。我还尝试更改ngbDropdownand的版本cdkDrag。bootstrap使用手动安装时，它也可以正常工作jQuery。

亲爱的所有 Angular 大师...

我在网上找到了一个很棒的角度材料多拖放示例，并希望限制拖放只允许从 ListA 到 ListB，并禁用从 ListB 到 ListA 的拖放。（下面附上stackblitz链接）

已经尝试了几个小时，但仍然无法解决这个问题......任何 Angular 专业知识都可以帮助我解决这个问题...... CdkDragDrop 中是否有我需要实施的特定事件才能使其工作？

https://stackblitz.com/edit/angular-multi-drag-drop-3part-vxkzje?file=src/app/multi-drag-drop.component.ts

我正在尝试制作一个可以具有拖放功能并具有响应性的网格。首先我尝试使用网格列表，但我找不到如何让它响应不同的屏幕尺寸。

我放弃了网格列表，我决定使用angular flex 布局库来创建我自己的网格，该网格本质上是响应式的。然后我尝试将它与Angular Material Drag n Drop结合起来，但它没有按应有的方式工作。

具体来说，我可以在网格元素周围拖动，但行为充其量是不稳定的。有时我可以重新排序元素，有时不能。有时我向左移动一个元素，它向右移动，有时相反。你得到图片。这是不可预测的。另一个问题是，如果您拖动元素，网格的其他元素随机出现和消失。

我尝试阅读拖放的文档，我开始觉得它不应该按照我想要的方式工作。有谁知道可能对我有用的实现？

这是我的代码：

我的组件.html

我的组件.ts

我有一个项目列表，一个是可用项目，另一个是选定项目，因此在可用项目中，在填写关键字的数量信息后，有一个设置数量的输入字段，按它需要移动到选定项目列表。我已经实现了拖放，但它需要在 enter(keyup) 事件上从一个组列表转移到另一个组列表。