Angular 通过拖放自动滚动

Question

我是最近几周 Angular 的新手。对于工作项目，当我将 DOM 元素拖动到 window.

的顶部或底部时，我希望 window 向上或向下滚动

我正在关注将 dragula 和 dom-autoscroller 集成到我的应用程序中的示例，因为 dragula 没有没有内置的自动滚动功能。我正在按照 angular application which uses touch and 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;
        }
      });

本来我把这个逻辑放在一个父组件里，结果drake又回来了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)]，他们选择在组件中创建德雷克。

这会导致问题吗？为什么会引起问题？如何让我的自动滚动工作？一般而言，有没有更好的方法来完成此操作？

Answer 1

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

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

Angular 通过拖放自动滚动

Angular Auto-scrolling with drag and drop

javascript

autoscroll

dragula

ng2-dragula

angular