通过拖放进行角度自动滚动

Question

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

我正在关注将dragula和dom- autoscroller集成到我的应用程序中的示例，因为 dragula 没有内置自动滚动。我正在从一个使用触摸的角度应用程序和另一个使用 dragula 和一起自动滚动。

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

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

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

最初，我将此逻辑放在父组件中，但 drake 返回undefined 。 当我把它放在处理拖放的组件之一上时，我在控制台中收到以下类型错误：

...后跟一个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>

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

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

Answer 1

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

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