I try to make a mix between this
and this
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?
3 Answers
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.
For Angular Material version 7.3.7 and above -
In case of someone interested how to do version from @ndrajeet's answer for Angular 12 - .
Working with Angular for 2-3 weeks only, so almost sure there is plenty to improve. But at least it's working :)
try this:
<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>
it worked for me
