drag-drop: make the view scroll when trying to move a draggable outside the current view

[lfroment0]

Bug, feature request, or proposal:

When trying to drag a cdkDragItem outside of the view, it does not scroll to show the rest of the cdkDrop div / the rest of the page.

What is the expected behavior?

The view should scroll towards the direction in which the element is being dragged to reveal the rest of the page.

What is the current behavior?

The view doesn't scroll, the droppable item cannot move out of the current view

What are the steps to reproduce?

In the following stackblitz, try to drag an item from the start of the list to the bottom of the list.
https://stackblitz.com/edit/angular-emaoau

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

The current behaviour feels very restrictive. you could have to take multiple steps if you want to drag and drop an element in a larger list.

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

• Angular Cdk 7.0.0 beta to 7.0.0-rc.1

[crisbeto]

There's been a TODO for it, but I've mostly held back until now since it's tricky figuring out which element should be scrolled.

[sanketi]

Is there any intermediate way to make it work with dom-autoscroller until TODO is addressed?
https://github.com/hollowdoor/dom_autoscroller

[JohnKis]

@crisbeto I've implemented auto scrolling on CdkDropList in my private fork. It doesn't cover scenarios where the drop list is wider/taller than its scroll parent but it works fine when the drop list fits on the screen. If you think it'd be useful, I can set aside some time to prepare a PR.

[crisbeto]

@JohnKis the scrolling logic here isn't really the issue. We've held back on implementing it until now, because it's tricky knowing which element we're supposed to scroll.

[JohnKis]

@crisbeto Understood, just figured I’d ask. Thanks

[abdulkareemnalband]

@crisbeto I think we could use cdk-scrollable as marker for element to scroll

Hi guys. Any ideas on when to expect the fix?

[rimvydas-urbonas]

Hey, any update on this thread?

[varminas]

Hi. I have a business case where multiple (say more than 10) containers are stacked vertical. So, need to think about this case as well while implementing auto-scrolling. Maybe for this solution it's possible to incorporate event cdkDropListEntered.

[lfroment0]

The cdkDropListEntered event already exists (cdkDragEntered), but doesn't solve the problem.

eg. the case where your dropzones are in a scrollable container and the height of a drop zone is greater than the one of the container, so as only one dropZone is displayed. The supposed cdkDropListEntered event will never be emitted.

Would it be possible to make a CdkdropListGroup aware of it's container, so that it can be conscious of how it should behave when moving an item towards the displayed edges of that container?

[agent0]

I have been trying to come up with a work-around that does not rely on specific functionality by the component library. My approach was to add transparent divs at the top and the bottom of the scrollable container und to watch for mouseenter/mouseleave events to scroll the container. Unfortunately, this did not work as the framework stops the propagation of these events. I don't know if this behavior could be chanhged more easily than coming up with brand new concepts to deal with the matter.