带拖放功能的角度自动滚动答案

【问题标题】：Angular Auto-scrolling with drag and drop带拖放功能的角度自动滚动
【发布时间】：2020-05-14 12:31:09
【问题描述】：

在过去的几周里，我是 Angular 的新手。对于工作项目，当我将 DOM 元素拖到窗口的顶部或底部时，我希望窗口向上或向下滚动。

我正在关注将 dragula 和 dom-autoscroller 集成到我的应用程序中的示例，因为 Dragula 没有内置自动滚动功能。我正在关注这个例子来自angular application which uses touch 和another on codepen，它们一起使用了 Dragula 和自动滚动条。

从示例中，我创建了这个逻辑：

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

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

本来我把这个逻辑放在了一个父组件里，但是德雷克回来了undefined。当我把它放在处理拖放的组件之一上时，我在控制台中收到以下 TypeError：

...后跟ERROR CONTEXT，适用于与组件关联的模板。

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

我检查了documentation，我认为我没有做任何不寻常的事情。我做事的方式与示例和文档给出的方式之间的主要区别是我使用指令来创建德雷克（使用[(dragulaModel)]，他们选择在组件中创建德雷克。

这会导致问题吗？为什么会导致问题？如何让我的自动滚动工作？一般来说，有没有更好的方法来实现这一点？

【问题讨论】：

标签： javascript angular autoscroll dragula ng2-dragula

【解决方案1】：

所以答案是……如果您需要自动滚动，请不要使用 Dragula。而是使用 Angular Material 的 CDK 拖放。它内置了自动滚动功能。检查一下：

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

【讨论】：