Question

我试图在拖动cdkDropList项目时提供滚动。截至目前，如果不使用鼠标滚轮滚动页面，则无法滚动。我希望能够基于列表项的拖动来滚动浏览整个页面。谷歌搜索似乎要几个月后才开始？！

我在角度材料仓库中发现了以下提交： https://github.com/crisbeto/material2/commit/b4be85f6716a2d1a432ef7109aa06e7255324222

，但在角材站点上未找到任何文档。自发布以来，是否有人使用Angular Material对CdkDropList元素实现了自动拖动滚动，我很好奇。我是新手。我尝试将cdkScrollable标签添加到div中，但是在拖动列表中的任何元素时都能够使自动滚动功能正常工作。

想法/建议？

Answer 1

从版本 9.1.0 开始，通过在应滚动的父级上设置cdkScrollable指令来支持自动滚动。

因此，对于 v9.1.0 及更高版本，以下代码应该有效：

<div style="height: 500px; overflow-y: auto" cdkScrollable>
  <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
  </div>
</div>

Stackblitz演示：

https://stackblitz.com/edit/angular-swaqkk-njehwg （使用Angular CDK v10.0.1 ）

此外，我在以下主题上发布了更完整的答案，其中包括更多示例以及Angular8的解决方案： Angular CDK - issue with scrolling and dragging element inside nested scrollable div

Answer 2

注意： cdkScrollable 不会神奇地使任何内容可滚动。您必须构建订阅和操作来处理事件。

关于 cdkDropList，如果子元素包含一个 *ngFor 和它要循环的项目，它将滚动。修改@andrevictor 的 answer 以证明这一点：https://stackblitz.com/edit/angular-swaqkk-4iaqwc?file=src%2Fapp%2Fcdk-drag-drop-sorting-example.html

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let movie of movies" >
    <ng-container *ngTemplateOutlet="Tmpl2; context:{ movieT: movie }">
    </ng-container>
</div>
<ng-template #Tmpl2 let-movieT="movieT">
    <div>
                <div class="example-box" cdkDrag>{{movieT}}</div>
    </div>
</ng-template>

将 ngFor div 移动到模板中并将 {{movieT}} 重命名为 {{movie}}，您将看到滚动停止。这是因为 cdkDropList 指令不能再访问另一个组件内的项目。我不知道有什么方法可以处理这种情况，但是如果您可以避免使用模板，我想滚动应该会按预期工作。如果您正在嵌套列表，这也是一个问题。我无法让 cdkDropListGroup attribute 工作，尽管添加 id 属性并使用 cdkDropListConnectedTo 数组属性（在同一链接中找到）效果很好。

Angular 8和Angular Material：使用CdkDropList项进行拖动滚动

2 个答案: