I created an app with drag and drop functionality that works well. However, when users add more than 10 items, the page becomes cluttered with too much dragging and dropping, making it difficult to see other items.
This app is designed to dynamically arrange modules in a specific order. It utilizes Angular 8 (recently updated from Angular 6). I attempted to implement virtual scrolling to address the issue, but encountered errors when combining it with the drag and drop feature.
<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>