Smooth move to x and y position with cdkDragFreeDragPosition in @angular/cdk/drag-drop

Question

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. I'm using @angular/cdk/drag-drop for this.

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]="{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.

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?

Answer 1

As per docs , this can be achieved by simply adding transition to the .cdk-drag class.

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: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.