角度材质：使用CDkDropList项拖动滚动(&A) [英] Angular 8 & Angular Material: Drag Scrolling with CdkDropList item

问题描述

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

我在角度材质存储库上找到了以下提交： https://github.com/crisbeto/material2/commit/b4be85f6716a2d1a432ef7109aa06e7255324222

，但在角度材料网站上没有找到任何文档。我很好奇，自从CDkDropList元素发布以来，是否有人在这个元素上实现了自动拖动滚动。我是个新来的人。我尝试将cdkScrollable标记添加到div中，但在拖动列表中的任何元素时都可以使用自动滚动功能。

想法/建议？

推荐答案

从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 (使用角度CDK v10.0.1)

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

这篇关于角度材质：使用CDkDropList项拖动滚动(&A)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！