Skip to content

cdk-drag-drop will out of layout when scrolling #13508

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.

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

Closed
genepg opened this issue Oct 9, 2018 · 6 comments · Fixed by #13524
Closed

cdk-drag-drop will out of layout when scrolling #13508

genepg opened this issue Oct 9, 2018 · 6 comments · Fixed by #13524
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@genepg
Copy link

genepg commented Oct 9, 2018

Bug, feature request, or proposal:

the display of dragging item will run away when the mouse wheel scrolling

What is the expected behavior?

the display of dragging item will not run away when the mouse wheel scrolling

What is the current behavior?

same as bug

What are the steps to reproduce?

just scroll down when you drag the todo

StackBlitz starter: https://stackblitz.com/angular/ebvljlbddvv?file=app%2Fcdk-drag-drop-connected-sorting-example.css

What is the use-case or motivation for changing an existing behavior?

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

Angular 6 and material 7.0.0-rc.1

Is there anything else we should know?

no

@crisbeto crisbeto self-assigned this Oct 9, 2018
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Oct 10, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 10, 2018
Prevents users from scrolling using the mouse wheel while an item is being dragged. This is a temporary measure until we have a solution to auto-scrolling while dragging, as well as to avoid having to measure the page for every pixel that the user has dragged.

Fixes angular#13508.
@cp79shark
Copy link

cp79shark commented Oct 11, 2018

Haven't had a chance to confirm if this is related, but think it may be. If you have cdkDrop zones inside an element with overflow scrolling I have noticed the following:

  • Doesn't auto scroll (mentioned in the referenced PR a solution is not in place for this)
  • Seems to lose track of the drag item's position relative to the container element's actual position in the client view port

Sorry for the size, the attached GIF shows the second bullet in action. I had to implement an auto scroll zone like feature since it doesn't do it for me so that the overflow container will scroll up or down depending on where I am relative to the element's client position with my mouse cursor while dragging. For example (within 200px of the top of the element, scroll up, 200px of the bottom scroll down).

If the scrollTop of the container element is changed mid-drag, it seems to get confused on where "it is". You'll notice I have to drag the dragging element well above the top cdkDrop in order for it to register the cdkDragEntered on it.

drag-drop-angular-issue3

I'll try to throw a minimal stackblitz together if the GIF and description isn't helpful, but won't be able to for a day or so.

@sliceofbytes
Copy link

I can also confirm this is an issue. I've updated the standard example with a few more elements so It is easier to trigger the bug. Just grab one of the items from the top list and use mouse wheel to scroll to the next page.

https://angular-cdk-drag-drop.stackblitz.io/

@cisasteelersfan
Copy link

cisasteelersfan commented Oct 23, 2018

I think this may be related - when scrolled down on a page and then opening a dialog with a drag-drop, dragging elements seems to be offset by approximately the amount scrolled down the screen:

https://stackblitz.com/edit/angular-dragdrop-dialog-bug

drapdrogdialogbug

vivian-hu-zz pushed a commit that referenced this issue Nov 6, 2018
Prevents users from scrolling using the mouse wheel while an item is being dragged. This is a temporary measure until we have a solution to auto-scrolling while dragging, as well as to avoid having to measure the page for every pixel that the user has dragged.

Fixes #13508.
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 8, 2018
Prevents users from scrolling using the mouse wheel while an item is being dragged. This is a temporary measure until we have a solution to auto-scrolling while dragging, as well as to avoid having to measure the page for every pixel that the user has dragged.

Fixes angular#13508.
@NaLLiFFuNT
Copy link

i'm afraid preventing scrolling it's not good idea. The best solution is to take it into account while dragging. Prevent scrolling can be helpful in limited cases when you have no long lists.

vivian-hu-zz pushed a commit that referenced this issue Nov 8, 2018
Prevents users from scrolling using the mouse wheel while an item is being dragged. This is a temporary measure until we have a solution to auto-scrolling while dragging, as well as to avoid having to measure the page for every pixel that the user has dragged.

Fixes #13508.
vivian-hu-zz pushed a commit that referenced this issue Nov 12, 2018
Prevents users from scrolling using the mouse wheel while an item is being dragged. This is a temporary measure until we have a solution to auto-scrolling while dragging, as well as to avoid having to measure the page for every pixel that the user has dragged.

Fixes #13508.
@victorcarvalhosp
Copy link

i'm afraid preventing scrolling it's not good idea. The best solution is to take it into account while dragging. Prevent scrolling can be helpful in limited cases when you have no long lists.

I think it's clearly not a good idea, the drag and drop are unusable when we use long lists now...

@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 Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants