CDK Drag and Drop cdkDragBoundary is not working after resize in responsive design

[VigneshMadhavan]

What is the expected behavior?

The Drag element should be dragged inside cdkDragBoundary boundary even after resize the browser window.

What is the current behavior?

Dragging area is less than cdkDragBoundary boundary

What are the steps to reproduce?

https://dragndrop-restrction.stackblitz.io/

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7
CDK 7
Windows 10
TypeScript 3.1
IE11, Edge, Chrome 73, Firefox 66

Is there anything else we should know?

The dragged item is responsive so it will change as per browser size

[VigneshMadhavan]

Hi team, any ETA

[kadnova]

Hi
Is it going to be fixed any time soon?

[kylecannon]

Having this issue too.

[kylecannon]

@VigneshMadhavan @kadnova here is a workaround

First, you will have to observe any viewport changes or anything along those lines.. but after, you can do this

.....
  @ViewChild(CdkDrag) cdkDrag: CdkDrag;
  

  reset() {
    this.cdkDrag._dragRef['_previewRect'] = undefined;
    this.cdkDrag._dragRef['_boundaryRect'] = undefined;
  }
....

Example here (click the reset button to get it to work again)

https://stackblitz.com/edit/dragndrop-restrction-tgh2ku