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

我正在尝试使用 cdkDragDrop 实现两个相交的拖放。虽然我更愿意整体避免使用表格，但我创建了一个表格是为了（希望）更容易解释。

链接到 StackBlitz：https ://stackblitz.com/edit/angular-ivy-4bcutu ？

app.component.html

app.component.ts

使用 cdkDrag 重新排序“行”列表非常简单，但我的问题是，“我该如何重新排序同一组件中的“列”？

我的怀疑是 cdkDropList 不能使用，因为我不相信我可以将第二个 cdkDragHandle 和 cdkDropListDropped 添加到这个“表”中，因此对可能帮助我在 Angular 中实现相同目标的替代库的建议持开放态度。

StackBlitz：https ://stackblitz.com/edit/league-predictions

我有一个项目，我想预测足球联赛的排名。我有两个列表，一个包含预测，一个包含所有团队。

一开始预测列表是空的，所以你可以开始拖队。但是因为它是空的，所以第一队自动排名第一。当然，您可以稍后对其进行排序，但我想要的是基于团队数量的预定义插槽。这样，您可以将团队直接拖到正确的位置。

我真的无法在互联网上找到如何实现这一目标的解决方案。

这是我目前的情况，所以你可以看到我在说什么： 联赛预测

这就是我想要实现的目标。

有人知道如何为 Angular CDK DragDrop 预定义插槽吗

这是我当前的代码。

不要介意一长串的团队，这都是来自数据库的数据

看我的步骤

1. npm install @angular/cdk

2. 在 app.module.ts -> 从 '@angular/cdk/drag-drop' 导入 { DragDropModule }；并导入：[DragDropModule]

3. 接下来我要创建拖放卡列表。我为一张卡片创建了组件，并在我想要获取 [{data}]、生成卡片并为当前卡片传递当前数据时创建了父组件。

父组件 TS：

父组件 HTML

但是在我的卡上拖放不起作用，请帮助我）

对于组件 HTML 中的 (cdkDropListDropped)="drop($event)，我有警告（事件 cdkdroplistdropped 不是由任何适用的指令或 div 元素发出的）

[cdkDropListConnectedTo]="[todo]"未使用Angular 9连接到另一个div中的#todo

它说“Component_name”上不存在“todo”属性

另一个 div 是

我正在使用 Angular 10 创建一个实时系统，其中用户 1 在屏幕上拖动项目，并且项目的位置在用户 2 屏幕上更新。我为此使用@angular/cdk/drag-drop。

我通过绑定cdkDragFreeDragPosition到在用户 1 删除对象时更新的对象xPos和yPos属性来更新用户 2 屏幕上的位置：

[cdkDragFreeDragPosition]="{x: wsc.xPos, y: wsc.yPos}"

这可行，但是用户 2 的对象位置会跳跃而不是平滑地移动到有点难看的新位置。

请问有没有办法让用户 2 屏幕上的对象从它的初始位置平滑地移动到新位置？

我正在使用 Angular 10 和panzoom。在 panzoom 元素内，我有使用@angular/cdk/drag-drop的可拖动元素。

这工作正常，直到我用 panzoom 放大或缩小。放大时，拖动会加速并且比我的鼠标移动得更快。缩小时它会减速并且比我的鼠标移动得更慢。

我认为这是由于像素位置与全景缩放中的缩放元素以某种方式造成的。

我找到了处理它的这个答案，但我无法复制它，它正在使用 JQuery 可拖动。

有谁知道如何使可拖动元素在使用 panzoom 和 angular-cdk-drag-drop 放大或缩小时保持与鼠标相同的速度？

谢谢你。

我有两个对象，用户和信息。

我打算在不同的列中呈现用户（使他们个性化），并且在每个用户中我打算将各自的信息放在用户 ID 与信息对象中的 IDUser 相同的位置。基本上，我打算分别在每个用户的列表中显示 Obejto Info 信息。

目前我有两个列表（用户和信息），我想在垂直和水平放置它们之间拖放，但没有成功。

有人可以帮我解决这个问题，以便将卡片从一列传递到另一列（从用户到用户）。

示例：在名为 Name1 的列中，我打算将带有文本 Expand 的卡片放在名为 Name2 的列中。

谢谢

演示

html

.ts

我已经这样做了：

但是该解决方案导致对话框可以通过单击窗口的任何位置来拖动，这使得无法<textarea>在内容块内扩展。理想情况下，我需要一种仅通过单击标题才能使其可拖动的方法。

我想将图像从一个 div 拖到另一个 div。我尝试创建两个包含图像 src 的数组并循环遍历所有 src，从而显示两个列表，以便我可以通过创建函数 (cdkDropListDropped)="drop($event)" 轻松拖放

但在这里我只使用一个图像并且没有使用任何数组。那么，我该如何拖放，我不知道我应该使用什么函数来将图像完美地拖放到另一个 div 中。

html:

我正在像游戏这样的跳棋上实现拖放，一切正常......直到棋盘旋转，然后所有 dnd 和实现都被破坏：当我将一块拖到顶部时，该块落到底部，什么时候被拖向左，向右。

问题示例代码 https://stackblitz.com/edit/angular-h3xixz?file=src%2Fstyles.scss

这是打破dnd行为的css片段，但我真的需要在游戏过程中动态地旋转棋盘。

我不想放弃@angular/cdk 实现，但也许我别无选择，我快疯了。

更新

为了更清楚地说明问题，我附上了一个带有动画的示例来旋转容器。我已经有一个解决方法，我将在答案中分享。

https://stackblitz.com/edit/angular-h3xixz-2t148v