CDK: scrolling page while dragging item does not work

[ghost]

Bug, feature request, or proposal:

Bug / Feature request

What is the expected behaviour?

When dragging an item with cdkDrag attribute, user should be able to use mouse wheel to scroll down the page, or the page should scroll down automatically if the draggable list longer than current page's height.

What is the current behaviour?

Mouse scroll on page is not working when dragging an item.

What are the steps to reproduce?

A) Goto https://material.angular.io/cdk/drag-drop/overview
Click on Draggable square in Basic Drag&Drop (Getting started section). While holding left mouse button pressed, try to scroll the page down with mouse wheel or touchpad.

B) Click on Draggable list item in Drag&Drop sorting (Reordering lists section). Make sure that half of the list is not visible in viewport. Click on any item and start dragging it to the bottom of the list. Again, mouse wheel scroll is not working, neither the page gets scrolled down automatically when you try to drag item down the list.

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

This is Accessibility related issue and should be working to get the best user experience.

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

Angular 7.

Is there anything else we should know?

If you check React's draggable component here (https://react-beautiful-dnd.netlify.com/?selectedKind=single%20vertical%20list&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) you should get a better understanding of the expected Accessibility feature. Drag the top item to the bottom of the list and see how the page scrolls down. Mouse wheel scroll is also working fine.

[crisbeto]

Currently scrolling is disabled intentionally. It'll be enabled once #13588 is resolved.

[ghost]

Does not seem that anyone is solving #13588. @crisbeto any ideas when this is gonna be enabled/fixed?

[Maks-Yaremenko]

any progress on this issue?

[sureshdotariya]

Angular 8 CDK release adding this support? drag and drop inside scroll container

[vidhya-longani]

Any update here?

[vincentdsf]

This is real show stopper for us as our webapp shows a lot of data and with Dragular2 its no problem to scroll also while dragging. We had to cancel our (almost complete) migration to Material Drag because of this Bug, please fix it soon if possible :/

[sandeepsuvit]

Hi i have tried using this library for my projects ngx-smooth-dnd. Work really well with dnd support and drag on scroll as-well. I have made a sample demo app here https://github.com/sandeepsuvit/angular-dnd-survey-creator. Here is a working demo of the app that i created using ngx-smooth-dnd. Hope this helps someone until this issue is fixed :)

[kflo]

BUMP

[kflo]

This bug really is a deal breaker in the Angular Material CDK...

[woteska]

Any update on this? #13588

[filipemendes1994]

Any news?

[SurjithP]

Any update ?

[subotin94]

Any update?

[smiles2424]

If I'm reading the chain properly:

In issue #13588 it references PR #16382 that was closed on July 9th. So this should be in 8.1.0 and above.

Hoping this helps.

[gnusiva]

any updates?

[BlindDespair]

any updates?

[hamzadiaz]

Still having same issue, is there a way to enable scrolling while dragging??

[shlomishe]

any updates?

[Enngage]

I also wonder what changed as dragging while scrolling worked after the update, but now it started happening again - scrolling while dragging somehow offsets the row position so it's not possible to drag item to correct position after scroll has be initiated.

This is not happening on the sample https://material.angular.io/cdk/drag-drop/overview, but I'm still wondering what could be the cause of this..

[liesahead]

So, if anyone still has issues with this I can share solution I found and it's super strange it's not clearly documented.

Let's say you have a list and you want to implement DnD with autoscroll for it:

<div class="scrollable-content" cdkScrollable>
    <ul cdkDropList>
        <li cdkDrag *ngFor="let item of items"></li>
    </ul>
</div>

The important thing here is cdkScrollable on scrollable container. It can be far ancestor (in our case it's like that) and not direct parent.

To summarize, to enable autoscroll you need to import CdkScrollableModule and set cdkScrollable for scrollable container which should scroll on drag.

[augustinw]

So, if anyone still has issues with this I can share with solution I found and it's super strange it's not clearly documented.

Let's say you have a list and you want to implement DnD with autoscroll for it:

<div class="scrollable-content" cdkScrollable>
    <ul cdkDropList>
        <li cdkDrag *ngFor="let item of items"></li>
    </ul>
</div>

The important thing here is cdkScrollable for scrollable container. It can be far ancestor and not direct parent (in our case it's like that).

To summarize, to enable autoscroll you need to import CdkScrollableModule and set cdkScrollable for scrollable container which should scroll on drag.

So for me the import was actually
import {ScrollingModule} from '@angular/cdk/scrolling';
Here's the docu: https://material.angular.io/cdk/scrolling/api ( not mentioning DragDrop though)

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