Angular Auto-scrolling with drag and drop

Question

I'm new to Angular in the last few weeks. For a work project, I want the window to scroll up or down when I drag a DOM element to the top or bottom of the window.

I'm following an example for integrating dragula and dom-autoscroller into my application, since dragula doesn't have autos-crolling built in. I'm following this example from an angular application which uses touch and another on codepen which uses dragula and auto-scroller together.

From the examples, I created this logic:

    const drake = this.dragulaService.find('MyDragGroup').drake;

    this.scroll = autoScroll(
      window,
      {
        margin: 30,
        maxSpeed: 25,
        scrollWhenOutside: true,
        autoScroll() {
          return this.down && drake.dragging;
        }
      });

Originally, I put this logic in a parent component, but the drake came back undefined. When I put it right on one of the components that handles the drag and drop, I get the following TypeError in the console:

...followed by an ERROR CONTEXT, which applies to the template associated to the component.

<div class="drag-things" dragula="MyDragGroup" [(dragulaModel)]="currentGroup.MyDragThings">
    <div *ngFor='let item of currentGroup.MyDragThings'>
        <app-drag-thing [currentDragThing]='item'></app-drag-thing>
    </div>
</div>

I checked with the documentation and I don't think I'm doing anything unusual. The primary difference between the way I'm doing things and the way the examples and the documentation give is I'm using the directive to create the drake (using [(dragulaModel)], where they choose to create the drake within the component.

Could this be causing the problem? Why would it be causing the problem? How do I get my auto-scrolling to work? Is there just a better way to accomplish this in general?

Answer 1

So the answer is... Don't use Dragula if you need auto-scrolling. Instead use Angular Material's CDK drag and drop. It has auto-scrolling built in. Check it out:

https://material.angular.io/cdk/drag-drop/overview