How to integrate Angular's material drag and drop with virtual scrolling?

I'm trying to integrate Angular material's virtual scrolling with drag and drop, but for some reason when i'm trying to implement this it reverts the items and when i'm trying to drag and drop an element it doesn't work.

Here is a summary of the code

<cdk-virtual-scroll-viewport cdkDropList itemSize="50" class="example-viewport">
<div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>


As you can see, I didn't do anything special, besides that I replaced *ngFor with cdkVirtualFor because the docs are telling me that:

*cdkVirtualFor replaces *ngFor inside of a <cdk-virtual-scroll-viewport>, supporting the exact same API as *ngFor.
​

I've attached here a stackblitz demo! So, how to integrate drag and drop with virtual scrolling?

Continue reading...