angular - 如何在 Angular 8 中使用带有 DragAndDrop 的滚动条

Question

我使用正确的拖放创建了一个应用程序，但是当用户在 10 个项目之后添加项目时，拖动增长太多，您看不到其他项目

此应用程序用于从动态模块中选择顺序，该应用程序使用角度 8（从角度 6 更新）我尝试使用虚拟滚动，但使用拖放时出现错误

<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="names" class="example-list"
(cdkDropListDropped)="drop($event)">
<cdk-virtual-scroll-viewport>
    <div class="example-box" *cdkVirtualFor="let item of names; index as i" class="example-item" cdkDrag >{{item || 'Loading...'}}</div>
  </cdk-virtual-scroll-viewport>
  <button class="mat-icon-inline-2" mat-raised-button color="warn" (click)="deleteitem( (button_value = i) )">
    <mat-icon> delete </mat-icon>
  </button>
</div>
</div>

Answer 1

虽然它是 Angular 7，但你可以试试这个，但我觉得它也应该适用于 Angular 8。

https://www.talkingdotnet.com/angular-7-virtual-scrolling-and-drag-and-drop-features/