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