Angular material 7 use grid with drag and drop

Question

J'essaie de faire un mélange entre cela https://material.angular.io/cdk/drag-drop/overview#reordering-lists

et cela https://material.angular.io/components/grid-list/overview

Mais impossible!

J'essaye de faire quelque chose comme

<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>

Mais la goutte ne fonctionne pas.

Pour être clair, j'essaie de faire this , avec "1", "2", "3", "4" interchangeables par glisser-déposer avec Angular

Quelqu'un a-t-il déjà réussi à faire quelque chose comme ça?

Answer 1

essaye ça:

<mat-grid-list cols="4" rowHeight="100px" cdkDropList [cdkDropListData]="l1" class="example-list"
          (cdkDropListDropped)="drop($event)">
          <mat-grid-tile cdkDrag *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
            [style.background]="tile.color">
            {{tile.text}}
          </mat-grid-tile>
        </mat-grid-list>

ça a marché pour moi