20

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?

Community
  • 1
  • 1
Geoffrey
  • 199
  • 1
  • 1
  • 6
  • It does work, but it doesn't work very well. I suspect it has to do with MatGridList and the way that it is dynamically laid out. – G. Tranter Dec 07 '18 at 21:46
  • @Goeffrey have you gotten any further? – Andre Elrico Dec 08 '18 at 11:38
  • cant you just solve this with flexbox and in a css fashion? Thats means that you horizontal 1x4 list breaks into 2x2 matix? – Andre Elrico Dec 08 '18 at 11:41
  • 3
    I've spent the whole day trying to achieve the same thing without success. Then I read the material drag&drop documentation and it looks like we are supposed to make only vertical or horizontal lists --> List orientation: The cdkDropList directive assumes that lists are vertical by default. This can be changed by setting the orientation property to `"horizontal". – Battalgazi Dec 10 '18 at 14:10
  • Well, it won't work nicely when moved down the grid now. As per the documentation there's either horizontal or vertical and no grid approach :- | – Karthik Rana Jan 02 '20 at 11:39
  • 1
    https://kreuzerk.github.io/ng-sortgrid/ – suhailvs Mar 25 '20 at 03:56
  • @suhailvs this does not seem to work at all with Angular 10 – Steve Aug 19 '20 at 17:11

3 Answers3

19

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

indrajeet
  • 837
  • 10
  • 17
6

In case of someone interested how to do version from @ndrajeet's answer for Angular 12 - https://stackblitz.com/edit/angular-ivy-hhqtt3?file=src/app/app.component.ts .

Working with Angular for 2-3 weeks only, so almost sure there is plenty to improve. But at least it's working :)

Shulyk Volodymyr
  • 767
  • 6
  • 11
-1

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

Ali Mousavi
  • 1
  • 1