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

Created on 7 Apr 2019 · 5Comments · Source: angular/components

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

P3 has pr

Source

VigneshMadhavan

👍9

Most helpful comment

@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

kylecannon on 18 Jun 2019

👍4 ❤1

All 5 comments

Hi team, any ETA

VigneshMadhavan on 4 Jun 2019

Hi
Is it going to be fixed any time soon?

kadnova on 6 Jun 2019

Having this issue too.

kylecannon on 18 Jun 2019

@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

kylecannon on 18 Jun 2019

👍4 ❤1

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}