如何解决使用@ angular / cdk / drag-drop中的cdkDragFreeDragPosition平稳地移动到x和y位置
我正在使用Angular 10创建一个实时系统,其中用户1在屏幕上拖动项目,并且用户2在屏幕上更新项目的位置。我为此使用@angular/cdk/drag-drop。
我通过将cdkDragFreeDragPosition
绑定到对象的xPos
和yPos
属性来更新用户2屏幕上的位置,这些属性在用户1放下对象时更新:
[cdkDragFreeDragPosition]="{x: wsc.xPos,y: wsc.yPos}"
这可行,但是用户2的对象的位置跳了起来,而不是平稳地移动到新的位置,这有点难看。
请问有没有办法让用户2屏幕上的对象从初始位置平稳移动到新位置?
解决方法
根据docs,只需将transition
添加到.cdk-drag
类即可实现。
但是,这也将影响框的“手动”拖动-在用户拖动框时产生某种“延迟”效果。因此,您必须排除.cdk-drag-dragging
类,该类已添加到当前正在拖动的元素中:
.cdk-drag:not(.cdk-drag-dragging) {
transition: transform 250ms cubic-bezier(0,0.2,1);
}
当然,在某些情况下,您可能希望根据用例包括/排除其他类,但这应该可以带给您基本的思想。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。