title: Angular material 7 use grid with drag and drop
body: <p>I try to make a mix between this
  <a href="https://material.angular.io/cdk/drag-drop/overview#reordering-lists" rel="noreferrer">https://material.angular.io/cdk/drag-drop/overview#reordering-lists</a></p>
  <p>and this
  <a href="https://material.angular.io/components/grid-list/overview" rel="noreferrer">https://material.angular.io/components/grid-list/overview</a></p>
  <p>But impossible !</p>
  <p>I try to do something like</p>
  <pre><code>&lt;mat-grid-list cols=&quot;2&quot; rowHeight=&quot;2:1&quot;&gt;
  &lt;div cdkDropList class=&quot;example-list&quot; (cdkDropListDropped)=&quot;drop($event)&quot;&gt;
    &lt;div *ngFor=&quot;let book of books&quot; cdkDrag&gt;
      &lt;mat-grid-tile class=&quot;example-box&quot;&gt;{{ book }}&lt;/mat-grid-tile&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
    
  <p>But the drop doesn't work.</p>
  <p>To be clear, I try to do <a href="https://i.stack.imgur.com/VoLqw.png" rel="noreferrer">this</a>, with &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot; interchangeable by drag&amp;drop <strong>with Angular material</strong></p>
  <p>Did anyone ever manage to do something like that?</p>