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

[Ben5501]

Hello,

has anyone an idea how to get a reference to the dragged preview element, when it is a copy of the original or general?

The problem I try to solve is that if you drag an element and scroll the page the drag preview position is not at the position where the mouse position is any more.

i.e. if I scroll the page 500px while dragging the offset between drag preview and mouse/touch point is 500px.

My goal is to at least update the preview position after scrolling to the current mouse/touch point.

[harellevy]

also added a directive vsDragScroll https://github.com/volser/cdk-drag-scroll

npm install --save cdk-drag-scroll

use:

<div
  *ngFor="let item of items"
   cdkDrag
   vsDragScroll
   [vsDragScrollContainer]="scrollContainer"
   [cdkDragData]="item">
   ...
</div>

this would work on scrollable window? or dnd container must have overflow?

[volser]

currently only container, but it easily could be adapted for window

[rajibhasan11]

Hi Volser,

Using the cdk-drag-scroll making the drag item slow in our application, we have nested drag-drop supports of fields, row, widget, section, column etc. In the demo it is not feelable as it had a simple list.

[ghost]

What about original solution and when will it be implemented in Angular?

[alvarosabu]

I tried @volser solution and it works fine if the scrollable container with fixed height, but doesn't work for the window scroll. (I guess is not meant for that)

We have any update on an official feature, even if it's on todo list?

[harellevy]

currently only container, but it easily could be adapted for window

If you can give an example of how you'd use it or implement it with window scroll (knowing that the list might be starting at the unknown position in the scroll and not exactly starting and ending at the top or bottom of the page.)

i guess you can find the list offset from the window container and calculate it.

[daiyis]

hi @volser , can this work two scroll containers? vertically in the cdkDropList and horizontally within the cdkDropListGroup (like in a trello board ).

[mxswat]

+1 from Italy with love

[volser]

use https://github.com/volser/cdk-drag-scroll/issues please, to discuss library related stuff

[Diemauerdk]

We are waiting for a solution for this too! :)

[quikvans]

+1 from Switzerland!

[vincentdsf]

+1 from Berlin

[AnisTss]

+1 from Tunisia

[ghost]

+1 from Lithuania.

[harellevy]

+1 from Israel

[honzamelena]

Hey guys, Angular 8 is out, great work! Hope it means the team is back on Angular material (or should I say Angular components).

This looks like a great opportunity to start discussing new component features (& bugs) we desperately are waiting for. This is certainly one of them. When I filter the P2 priority issues with most reactions / comments, this is the first one.

Would be awesome to make this thread "buzzing" again.

[TrietPham96]

. from VietNam

[varminas]

Without this functionality our application is in certain situations unused. I have tried all the above listed workarounds, directives, etc, but scrollable elements inside window (outside container) doesn't work. So, big plus from Swiss.

[dimitrov9]

+1 from North Macedonia

[Diemauerdk]

@varminas I agree, we are in same situation. For now we are waiting but this is essential for us too.

[sherwopj]

+1 from the Shires, UK

[TrietPham96]

This works well for me. Have a nice day https://stackblitz.com/edit/cdk-drop-list-scroll

[prom00]

This works well for me. Have a nice day https://stackblitz.com/edit/cdk-drop-list-scroll

This doesn't scroll on the parent element(s). It scrolls inside the CDK drop list.

[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 :)

[Diemauerdk]

@sandeepsuvit. This seems great and it works and behaves as we also want it to.

It can probably solve some peoples scenarios but we would still vote very high for this feature being in the angular cdk.

The problem is that this npm package is not that popular(maybe it will be) and is only in version 0.3.0. We have a very large application and we need bigger teams behind the npm packages.

I still don't understand why this feature is not prioritized more in the angular cdk since this small library made by 1 person can do this even before it's in version 1.x :D

[prom00]

@sandeepsuvit. This seems great and it works and behaves as we also want it to.

It can probably solve some peoples scenarios but we would still vote very high for this feature being in the angular cdk.

The problem is that this npm package is not that popular(maybe it will be) and is only in version 0.3.0. We have a very large application and we need bigger teams behind the npm packages.

I still don't understand why this feature is not prioritized more in the angular cdk since this small library made by 1 person can do this even before it's in version 1.x :D

This is the biggest reason why we don't use alot of "custom" modules too. They often stop getting (critical) updates after a while. We've learned it's best to go with only 100% original modules, or bigger ones, supported by Angular.

[kflo]

BUMP

someone, please...

[woteska]

Any update on this? https://github.com/angular/components/issues/14273#issuecomment-442201350

[MFStapert]

Also looking forward to this feature :)

[ghost]

Implemented CDK DnD and then found out this feature is missing... can we have a projection as off when this will be implemented?

[TheKeymaster]

Finally, that‘s all what we‘ve been waiting for!! Great that this is fixed now.

[woteska]

@crisbeto , when will it be released?

[crisbeto]

It should be in 8.1.0.

[neryortez]

How to make it work? The update is released, but I cannot see anything changed.

[Achilles1515]

@crisbeto Do you have a StackBlitz example showing how to use this feature? I can't seem to make it work on 8.1.1.

[crisbeto]

@Achilles1515 it depends on which is your scrollable element. At the moment it's set up to only scroll the window or the list itself. It starts scrolling when you're dragging and the pointer is close to the edge of the element.

[neryortez]

@crisbeto I got it working as you say: scroll just the list itself. To make it work one has to make the list scrollable (fixed height and/or overflow set to auto). Is there a way to enable scrolling also in the viewport?

[Achilles1515]

@crisbeto I also got it to work. In the gif below, is auto-scroll supposed to stop like it does when getting close to the left edge of the container? This does not happen on the right side of the container. https://stackblitz.com/edit/angular-dggptq

[woteska]

Unfortunately it does not work within a Material Table at all. :( I can scroll with mouse wheel now, but the distance between the drag placeholder and the dragged element is increasing while scrolling.

[rajibhasan11]

Unfortunately it does not work within nested cdkDropList. In my case I need mainly vertical auto scroll. In the attached image red circled scorllbar should be scrolled automatically when I try to drop a field in a form section.

[digaus]

Should be able to add directive to the container which we want to be able to scroll y and scroll x

[nkartchner]

Trying to build a Kanban board and dragging a card won't scroll the parent container horizontally.

https://stackblitz.com/edit/angular-dbp5r5

[fatmaE19]

but this works only with drop list if i have a box inside a container div when i drag the box it's container is not scrolling ! :/

[dawda92]

@crisbeto When grabbing a scrollable item and going past the bottom of the viewport or past the top of the viewport, the browser window doesn't scroll.
(the container is larger than the browser viewport.) Is there a way to do this?
I want the same functionality but within a container that is larger than the viewport. (So that the window automatically starts scrolling up or down & no extra scroll bar, just the windows scrollbar.) This seems like something that should just work out of the box?

[crisbeto]

That might be because the scroll regions are overlapping. I've got https://github.com/angular/components/pull/16675 to help with it.

[htreb]

+1 for @nkartchner 's stakblitz example. Even if you manually scroll the board when the ticket is being dragged the drop containers do not 'register' so when they scroll into view you still can't drop the ticket on them

[healydwya]

@crisbeto hi! are there plans to make this possible for mobile as well?

[crisbeto]

It should work on mobile already.

[tchpowdog]

Works for me but only for nearest scrollable parent it seems. Also, is there a way to set the scroll speed?

<div>  -- has horizontal scroll (new drag scroll feature does not work here)
    <div>    -- has vertical scroll (new drag scroll feature works here)
        <element>  -- draggable
    </div>
</div>