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

My drag has been implemented in a separate component and drop in another component.While dragging, I call [cdkDropListEnterPredicate]="isDropPossible" and I have to use a callback inside this "isDropPossible" function. This callback function will be nothing but the function that I will assign to the cdkDragData in the drag component, and this only handles whether a drop can happen inside a container or not. How will or how can I assign a function to cdkDragData is my question!!!

Drop component:(where callback needs to be made)

Drag Container

我在我的元素中使用 display-inline，因为我希望它们水平布局，而不是像大多数 Angular 示例中那样垂直布局。也就是说，CSS 的行为非常奇怪。我特别有两个问题。

1. 当我单击一个元素来拖动它时，它会变大（放下后会缩小到正常大小）。我不确定为什么会发生这种情况，但绝对不需要。我已经尝试了很多方法来通过css和添加一个带有 matchSize 的 cdkDragPreview 元素来解决这个问题（这似乎是 Angular 推荐的方法）。所有这些努力都失败了。我遇到了以下似乎与我的问题相似的错误报告： https ://github.com/angular/components/issues/19060 。我注意到这个错误已关闭，所以我不知道这是否意味着它已被修复。
2. 当我开始从底部下拉列表中拖动一个元素时，剩余的项目会偶尔移动，而该元素仍在下拉列表中（当它离开底部下拉列表时，它们的行为与我期望的一样）。我为 cdkDragPlaceholder 创建了一个隐藏样式，因为这似乎是 Angular 提供对此控制的方式，但它仅对顶部下拉列表有所帮助，并且似乎对底部没有影响。

这是一个链接，说明了 StackBlitz 上的两个问题： https ://stackblitz.com/edit/spuzzler 。我猜我的问题可以用 CSS 解决，但我不知道如何解决。

我正在尝试向我们提供 Angular Material cdkDragDrop。

该列表正在尝试从嵌套对象中填充。我可以显示列表，但在尝试移动项目时，它不会出现在“添加的详细信息”列表中

代码：https ://stackblitz.com/edit/angular-awxclk?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html

尝试使用由 FormGroup > FormArray 填充的 cdkDragDrop。我可以看到我的数组 (3) 中的项目数已正确呈现，但我无法在 div 中显示该值，而是显示 [Object Object]。

零件：

HTML：

Stackblitz：https ://stackblitz.com/edit/angular-asevei-gf4der?file=app%2Fcdk-drag-drop-sorting-example.html

一段时间以来，我一直在为这个问题绞尽脑汁。我想要实现的是有两个连接的具有恒定长度的拖放列表。这意味着如果我将一个元素从一个列表移动到另一个列表，一个项目就会被推送到另一个列表。这在活动期间当然是微不足道的cdkDropListDropped，但我希望它在项目被拖到列表上时立即发生。

我的大多数尝试都涉及使用该cdkDropListEntered事件来：

1. 尝试简单地移动数据数组中的项目：

这导致了以下类型的错误：

core.js：6185 错误 DOMException：无法在“节点”上执行“插入前”：要插入新节点的节点不是该节点的子节点

2. 尝试使用CdkDropList addItem(), removeItem(), getSortedItems(). 这会导致类似的问题。

3. 尝试使用 Renderer2 移动 DOM 元素本身（并且保持数据不变）

有什么方法可以实现我想要的吗？

这幅宏伟的绘画有助于解释我想要实现的目标。

使用 cdk 拖放移动 img 完全可以。但是如果我要拖动的div是可滚动的，那么优先cdk拖动，导致一个不可滚动的div。

重要提示：移动！- 使用 PC 滚动（滚轮）正在工作。

此外，视频的控制，例如音量，不能用滑块改变，因为拖动有点阻挡它。

在触发拖放之前是否有可能允许触摸滚动？

我面临一些奇怪的 CdkDrag 行为，当可拖动元素比容器宽时，即使拖动几个像素，也会立即拖动到可拖动元素的末尾。

知道如何使它顺利拖动，因为它适用于红色方块？

从父组件拖到一些子组件（多个相同类型的子组件）我(cdkDropListDropped)="drop($event)"用来指向：

但我无法从event目标组件中获取；

我正在使用 Angular Material 的拖放模块。How evercdkDrag似乎不适span用于我观察到的其他几个标签，例如a标签。

组件.html

组件.ts

但是，如果我span用div标签替换它就可以了。

任何想法，为什么会发生这种情况？以及如何解决这个问题？

提前致谢！

介绍

我有一个待办事项列表，它利用 Angular MaterialcdkDrag对cdkDropList. 将项目标记为“待办事项”或“已完成”，反之亦然。

问题

用户交互中有一定程度的细节，即页面刷新，这会导致项目不一定按照它们被拖动的顺序。

举个例子，一个用户被分配了 3 个任务：吃早餐，吃午餐，吃晚餐：

用户不喜欢该优先级并决定改为按此顺序处理他/她的饮食任务。拖放交互发生，待办事项列表最终确定为：

在页面刷新时，这就是问题开始的地方。它会回到原始状态：

吃早饭，吃午饭，吃晚饭

当它显然应该是：

吃晚饭，吃早饭，吃午饭

这一观察结果也适用于标记为已完成的项目。

我需要确认此交互的当前状态的缺失部分是什么。请注意，此实现基于How To Build an App With Drag and Drop With Angular

谢谢你的时间。