-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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
Comments
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.
Haven't had a chance to confirm if this is related, but think it may be. If you have
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 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. |
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. |
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: |
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.
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.
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. |
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.
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.
I think it's clearly not a good idea, the drag and drop are unusable when we use long lists now... |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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
The text was updated successfully, but these errors were encountered: