微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何更新Angular cdkDropList的位置?

如何解决如何更新Angular cdkDropList的位置?

我这个问题已经有一段时间了,无法解决,想问一下是否可以提供帮助。制作动画时,cdkDropList的“ {drop}”“放置区域”的位置不会更新。

  • 我想做什么

创建一个cdkDropList <div>作为容器(我们将{{1}放入cdkDropList <div> Bin )中}}元素来自另一个列表(我们将cdkDrag元素称为 Item )。 拿起物品时, Bin 应该飞入,当物品时,飞出会被删除(无论是返回原始cdkDrag还是 Bin )。

  • 会发生什么:

动画效果很好,但是当我将 Item 拖到 Bin 时,无法识别 Bin 。我的“无法识别”是指 Bin cdkDropList功能未触发。 仅当我通过拾取并拖放 Item 来制作动画时,才会出现此问题。我还尝试通过按钮使 Bin 动画,单击该按钮可使Bin出现/消失,并且效果很好(但这不是我想要的实现方式)。

  • 示例:

https://stackblitz.com/edit/angular-cvbare?file=src%2Fapp%2Fapp.component.html

在这个Stackblitz示例中,我重新创建了无法正常工作的东西,因为如果没有上下文,发布我的代码将会太繁琐且难以理解。

注意:在示例控制台中,当 Item 放入 Bin 中时,您会看到cdkDropListDropped。将项目放回原处或垃圾箱外的任何地方时,它将在控制台中打印Dropped something

  • 到目前为止我尝试过的事情:

使用...

... Dropped back动画,而不是CSS

... Angular

... ChangeDetectorRef

我真的很困,不知道如何解决此问题,将不胜感激。

解决方法

似乎是一个错误,目前尚未解决。刚刚在Github上发现了与该bug相关的这些票证:

Ticket #1

Ticket #2

Ticket #3

我想我只需要等待修复。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。