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

编辑 2：这个问题已经由了不起的 CDK 团队解决了！

编辑：由于这似乎是一种很奇怪的行为，我现在在官方 CDK 存储库中添加了一个问题。但是，请随意提出任何想法或解决方法。

我有不同类型的元素，*cdkDropList在拖动它们时需要不同的占位符高度。由于该数组具有具有属性的对象type，因此我将这些类型添加为 CSS 类并尝试使用[ngClass]. 但是，这些动态生成的类的行为与我将它们设置为“常规”CSS 类时的行为不同。

当我动态设置类时，会发生这种情况：

dropList占位符和重叠中的元素。以下是相关代码：

example.component.ts

example.component.html

example.component.scss

我目前只有两种不同的类型，但目标是使其易于扩展，以便以后添加更多。我也已经尝试过使用class="dropzone-placeholder {{ item.type }}"as well [class]="'dropzone-placeholder ' + item.type"，但无济于事。

[ngClass]经过进一步测试，我还发现，即使我们不使用变量，它通常也不起作用。使用[ngClass]="['dropzone-placeholder', 'text']"也没有用。

这是预期的行为：

占位符和 中的元素dropList不重叠，而是适当地放置在彼此下方。这种行为目前只能通过定期设置类来实现，但是 HTML 看起来相当不愉快，因为将来代码会变得混乱冗余。

example.component.html

为什么当类没有以传统方式设置时，CDK 的行为会有所不同？以及如何避免编写上面提到的冗余解决方法？

我希望能够以某种方式限制可以将拖动元素放入 dropList 的位置。我找不到任何使用当前 API 的方法。

例如，对于一个有 10 个元素的 dropList，一个拖动元素只能在位置 3 和 7 之间拖放。在位置 1 和 2 上拖动会显示位置 3 上的占位符元素，并且 drop 事件的位置参数设置为 3。作为 less理想但仍然令人满意的结果，当拖动位置 1 或 2 时，不会显示占位符，并且 dropList 不会触发 drop 事件，就好像移动无效一样。

我正在考虑使用 CdkDragEnter 和 CdkDragMove 的组合来为无效位置设置占位符的样式，然后使用 drop 事件来取消无效移动，但也许有更好的方法来做到这一点？

我也考虑过使用多个下拉列表，但我需要整个区域都是可放置的，并且长期目标是在前一个有效索引上显示占位符（而不是不显示占位符并且不允许放置），单个 dropList听起来更好的方法开始。

任何建议将被认真考虑。

谢谢你。

我想将占位符高度设置为拖动元素的高度。

现在我使用最小可能元素高度的静态高度占位符。我找不到任何关于如何做到这一点的信息，现在不知道。

组件 html

css

有任何想法吗？

我创建了一个图片库，我打算改变它们之间的位置。为此，我正在使用拖放 cdk 库。

我的问题是图像的交换并不总是正确发生，有时我将第一个图像与第二个交换并且这种交换不会发生。

我如何才能在水平和垂直方向上拥有完整的功能？

有没有办法只有在图像存储在 mdc-image-list - with-text-protection 类中时才能启动拖动？

谢谢 ！

演示

.HTML

.ts

我有一个图片库，我打算将这些图片拖放到拖放区。

我尝试在两种情况下使用它（使用鼠标拖动图像并使用允许我将图像移动到放置区域的 cdk 拖放）。

有没有办法从放置在放置区的图像中获取对象（名称、id ...）？我尝试将图像拖到放置区，当我在那里释放它时，我想知道哪个图像被放置了。

有没有办法做到这一点？有人能帮我吗？

非常感谢！

演示 - 堆栈闪电战

.TS

使用图像 (cdkDrag) 我无法在放置区中获得任何检测到某物进入的事件。

使用普通图像，我能够执行该功能

但我没有得到如图所示的结果。

我希望能够使用 CDK 拖放将来自不同容器的多个元素添加到一个容器中。是否可以从本质上对不同的项目进行颜色编码。现在，当我拖动一个项目时，它会从它放入的容器中继承样式，我希望它保持其在原始容器中的颜色。

HTML

CSS

我有一长串必须拖放的元素。如果元素在视口中，这将起作用。如果我必须进一步向下或向上拖动，页面不会滚动。我使用 CdkVirtualScrollViewport 进行滚动，使用 CdkDragDrop 进行拖放。

这是我的html代码

还有我的 .ts 文件功能

如何在使用 cdkvirtualscroll 拖动时实现自动滚动？

我觉得我必须错过一些简单的东西。我正在尝试使用 Angular 的 DragDropModule 构建一个相当简单的应用程序。我只想将项目从一个 cdkDropList 转移到另一个。我在网上找到了一些类似的东西并让它发挥作用。但是当我尝试调整自己的代码时，我不断收到一个错误，告诉我 currentArray.splice 不是函数。

我已经在stackblitz上完成了代码。

我的代码在上面，测试代码在下面。您会注意到测试代码按预期工作，而我的则抛出错误。我看到的唯一不同的是，我将字符串值存储在数组中，并且它们存储数字值，但我必须遗漏其他东西。任何能指出我正确方向的人将不胜感激。谢谢！

我正在尝试使用 div 元素标记并使其表现为带有 css 的文本区域。

但我在我的卡上使用父组件（类别组件）的 cdkDrag

我发现此链接contenteditable 无法与 cdkDrag 在 google-chrome 上正常工作，解释相同，但无法得到任何答案。

我正在使用 Angular 的 Drag Drop CDK 在两个列表之间传输项目。我需要的一项特定功能是能够监听组件 API 提供的cdkDrag元素。started Subject但是，在将项目转移到新列表后，我失去了事件侦听器。

此处的示例代码：https ://stackblitz.com/edit/angular-m8lcqp

将元素移动Fall Asleep到完成列表时，我会登录started dragging到控制台。但是，如果您尝试将该元素移回第一个列表，则不会触发该事件。我做错了什么？

要订阅该started事件，我ViewChildren会QueryList使用cdkDrag. 在 中ngAfterViewInit()，我遍历这些拖动元素并订阅started事件：

跟踪此事件的正确方法是什么？cdkDrag由于元素现在位于不同的列表中，我是否需要检测页面上的更改然后重新循环并重新订阅？谢谢！