Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
VigneshMadhavan opened this issue Apr 7, 2019 · 5 comments · Fixed by #16876
Closed

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

VigneshMadhavan opened this issue Apr 7, 2019 · 5 comments · Fixed by #16876
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@VigneshMadhavan
Copy link

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
@crisbeto crisbeto self-assigned this Apr 8, 2019
@andrewseguin andrewseguin added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Apr 12, 2019
@VigneshMadhavan
Copy link
Author

Hi team, any ETA

@kadnova
Copy link

kadnova commented Jun 6, 2019

Hi
Is it going to be fixed any time soon?

@kylecannon
Copy link

Having this issue too.

@kylecannon
Copy link

kylecannon commented Jun 18, 2019 •
edited
Loading

@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

crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 25, 2019
@crisbeto
fix(drag-drop): handle the element going out of the boundary after a …
db2dfe6 
…viewport resize

Adds some logic to ensure that an element inside a boundary is contained within it after the viewport is resized and the boundary may have changed size.

Fixes angular#15749.
@crisbeto crisbeto added has pr and removed has pr labels Aug 25, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 25, 2019
@crisbeto
fix(drag-drop): incorrectly constraining element position if size cha…
4828df0 
…nges between drag sequences

When a drag sequence is started we cache the dimensions of the element and the boundary so that we don't have to cause a reflow for each pixel of dragging, however with the current logic the cached dimensions are only cleared for the case where the item is part of a drop list. As a result, if a freely-dragged item with a boundary changes size between drag sequences its position won't be constrained correctly anymore.

These changes fix the issue by correctly clearing the cached dimensions in all cases.

Fixes angular#15749.
@crisbeto crisbeto mentioned this issue Aug 25, 2019
Merged
jelbourn pushed a commit that referenced this issue Sep 6, 2019
@crisbeto @jelbourn
fix(drag-drop): incorrectly constraining element position if size cha…
bd8f1e6 
…nges between drag sequences

When a drag sequence is started we cache the dimensions of the element and the boundary so that we don't have to cause a reflow for each pixel of dragging, however with the current logic the cached dimensions are only cleared for the case where the item is part of a drop list. As a result, if a freely-dragged item with a boundary changes size between drag sequences its position won't be constrained correctly anymore.

These changes fix the issue by correctly clearing the cached dimensions in all cases.

Fixes #15749.
jelbourn pushed a commit that referenced this issue Sep 6, 2019
@crisbeto @jelbourn
fix(drag-drop): incorrectly constraining element position if size cha…
cad0102 
…nges between drag sequences (#16876)

When a drag sequence is started we cache the dimensions of the element and the boundary so that we don't have to cause a reflow for each pixel of dragging, however with the current logic the cached dimensions are only cleared for the case where the item is part of a drop list. As a result, if a freely-dragged item with a boundary changes size between drag sequences its position won't be constrained correctly anymore.

These changes fix the issue by correctly clearing the cached dimensions in all cases.

Fixes #15749.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
5 participants
@kylecannon @crisbeto @kadnova @andrewseguin @VigneshMadhavan