Angular material 7 use grid with drag and drop

Question

I try to make a mix between this https://material.angular.io/cdk/drag-drop/overview#reordering-lists

and this https://material.angular.io/components/grid-list/overview

But impossible !

I try to do something like

<mat-grid-list cols="2" rowHeight="2:1">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let book of books" cdkDrag>
    <mat-grid-tile class="example-box">{{ book }}</mat-grid-tile>
  </div>
</div>

But the drop doesn't work.

To be clear, I try to do this, with "1", "2", "3", "4" interchangeable by drag&drop with Angular material

Did anyone ever manage to do something like that?

Solution

This is a workaround -We can use a cdkDropListGroup and create two cdkDropList where one would act like placeholder and using cdkDropListEnterPredicate we can allow user to move the item horizontally simultaneously update the Dom manually to display the placeholder. and when user drops the item we have to manually update the dom and move item into array.

This guy created a work around using flex-wrap.

https://stackblitz.com/edit/angular-nuiviw?file=src%2Fapp%2Fapp.component.html

For Angular Material version 7.3.7 and above - https://stackblitz.com/edit/angular-dyz1eb