拖放进行角度自动滚动

Question

最近几周我刚接触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> 适用于与组件关联的模板。

[(dragulaModel)]

我与documentation进行了核对，但我认为我没有做任何异常的事情。我的处事方式与示例和文档给出的方式之间的主要区别在于，我使用伪指令创建了Drake（使用slice，他们选择在组件内创建Drake。

这可能是造成问题的原因吗？为什么会引起问题？如何使自动滚动工作？总的来说，有没有更好的方法可以做到这一点？

Answer 1

所以答案是...如果您需要自动滚动，请不要使用Dragula。而是使用Angular Material的CDK拖放。它具有自动滚动功能。请查看：

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