ドラッグ アンド ドロップする必要がある要素の長いリストがあります。要素がビューポートにある場合、これは機能しています。さらに下または上にドラッグする必要がある場合、ページはスクロールしません。スクロールには 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 を使用してドラッグ中に自動スクロールを実装するにはどうすればよいですか?