title: How to integrate Angular's material drag and drop with virtual scrolling?
body: <p>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.</p>
  
  <p>Here is a summary of the code</p>
  
  <pre><code>&lt;cdk-virtual-scroll-viewport cdkDropList  itemSize="50" class="example-viewport"&gt;
    &lt;div cdkDrag *cdkVirtualFor="let item of items" class="example-item"&gt;{{item}}&lt;/div&gt;
  &lt;/cdk-virtual-scroll-viewport&gt;
  </code></pre>
  
  <p>As you can see, I didn't do anything special, besides that I replaced <code>*ngFor</code> with <code>cdkVirtualFor</code> because the <a href="https://material.angular.io/cdk/scrolling/overview#creating-items-in-the-viewport" rel="noreferrer">docs</a> are telling me that:</p>
  
  <blockquote>
    <p><code>*cdkVirtualFor</code> replaces <code>*ngFor</code> inside of a <code>&lt;cdk-virtual-scroll-viewport&gt;</code>, supporting <strong>the exact same API</strong> as <code>*ngFor</code>.</p>
  </blockquote>
  
  <p>I've attached here a <a href="https://stackblitz.com/edit/angular-cjgp5p?file=src%2Fapp%2Fapp.component.html" rel="noreferrer">stackblitz demo</a>! So, how to integrate drag and drop with virtual scrolling?</p>