时间戳

首页 > 解决方案 > Angular 8 和 Angular 材质：使用 CdkDropList 项拖动滚动

angular - Angular 8 和 Angular 材质：使用 CdkDropList 项拖动滚动

问题描述

我试图在拖动 cdkDropList 项目时提供滚动。截至目前，如果不使用鼠标滚轮滚动，页面将无法滚动。我希望能够根据列表项的拖动来滚动页面。谷歌搜索后，似乎直到几个月前才有可能？！

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

但在角度材料网站上没有找到任何文档。我很好奇，自从发布以来，是否有人使用 Angular Material 在 CdkDropList 元素上实现了任何自动拖动滚动。我对角度比较陌生。我已经尝试将 cdkScrollable 标记添加到 div 中，但是在拖动列表中的任何元素时能够使自动滚动功能正常工作。

想法/建议？

标签： angulardrag-and-dropangular-materialangular8angular-cdk

解决方案

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

因此，对于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

推荐阅读