cdk-drag-drop will out of layout when scrolling

[genepg]

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

[cp79shark]

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.

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]

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]

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

[NaLLiFFuNT]

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.

[victorcarvalhosp]

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]

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.}