[英]Smooth move to x and y position with cdkDragFreeDragPosition in @angular/cdk/drag-drop
I'm creating a realtime system with Angular 10 where the user 1 drags items on the screen and the location of the item updates on user 2 screen.我正在使用 Angular 10 创建一个实时系统,其中用户 1 在屏幕上拖动项目,项目的位置在用户 2 屏幕上更新。 I'm using @angular/cdk/drag-drop for this.
我为此使用@angular/cdk/drag-drop 。
I am updating the position on the user 2 screen by binding cdkDragFreeDragPosition
to the object's xPos
and yPos
properties which are updated on user 1 dropping the object:我通过将
cdkDragFreeDragPosition
绑定到对象的xPos
和yPos
属性来更新用户 2 屏幕上的位置,这些属性在用户 1 删除对象时更新:
[cdkDragFreeDragPosition]="{x: wsc.xPos, y: wsc.yPos}"
This works, but the position of the object for user 2 jumps rather than moving smoothly to the new position which is a bit ugly.这是可行的,但是用户 2 的对象位置会跳跃而不是平滑地移动到新位置,这有点难看。
Is there a way to get the object on user 2 screen to move smoothly from it's initial position to the new position, please?有没有办法让用户 2 屏幕上的对象从它的初始位置平滑移动到新位置?
As per docs , this can be achieved by simply adding transition
to the .cdk-drag
class.根据docs ,这可以通过简单地向
.cdk-drag
类添加transition
来实现。
However, this would also affect "manual" dragging of the box - effecting in kind of a "delay" while the user drags the box.但是,这也会影响框的“手动”拖动 - 在用户拖动框时会产生“延迟”。 So you have to exclude the
.cdk-drag-dragging
class, which is added to the elements that are currently being dragged:所以你必须排除
.cdk-drag-dragging
类,它被添加到当前被拖动的元素中:
.cdk-drag:not(.cdk-drag-dragging) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Of course, there might be some other cases where you might want to include / exclude other classes based on your use case, but that should give you the basic idea.当然,在其他一些情况下,您可能希望根据您的用例包含/排除其他类,但这应该给您基本的想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.