拖放干扰滚动Angular 7 CDK

Question

我有一个Angular 7应用，并在其中拖放了角cdk以重新排列列表。拖放工作正常，但无法自动滚动div容器。是否有任何方法可以使自动滚动工作而无需更新此链接的angular / cdk版本 https://github.com/angular/components/issues/13588

我当前的angular / cdk版本：7.3.7。

StackBlitz：https://stackblitz.com/edit/angular-dggptq-rhbitf

Answer 1

问题出在您的HTML上

<div class="container">
<div cdkDropList [cdkDropListData]="timePeriods" class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
</div>
</div>

收件人

<div cdkDropList [cdkDropListData]="timePeriods" class="example-list container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
</div>

正在工作的Stackblitz：-https://stackblitz.com/edit/angular-dggptq-fmjjjx

原因：-为使自动滚动工作，您的滚动应该在cdk下拉列表中，因此我删除了多余的div并将您的容器类应用于cdkdrop列表div。