1

我有一长串必须拖放的元素。如果元素在视口中，这将起作用。如果我必须进一步向下或向上拖动，页面不会滚动。我使用 CdkVirtualScrollViewport 进行滚动，使用 CdkDragDrop 进行拖放。

这是我的html代码

<cdk-virtual-scroll-viewport cdkDropList #virtualScroller  [itemSize]="100" class="stepViewPort" cdkDropList  [cdkDropListData]="listOfSteps" (cdkDropListDropped)="dropSteps($event)" >

    <div [@fadeInOut] class="TestSteps example-item" *cdkVirtualFor="let step of listOfSteps;TemplateCacheSize:0 let i=index" cdkDragBoundary=".example-boundary"  cdkDrag>

还有我的 .ts 文件功能

 dropSteps(event) {
moveItemInArray(
  event.container.data,
  event.previousIndex,
  event.currentIndex
);
   let control = <FormArray>this.ActionTypeForm.controls['steps'];
   control.controls=event.container.data;

     this.listOfSteps = this.ActionTypeForm.get('steps')['controls'];
     this.listOfSteps = [...this.listOfSteps];
}

如何在使用 cdkvirtualscroll 拖动时实现自动滚动？

4

0 回答 0