web-dev-qa-db-ja.com

Angularマテリアル7ドラッ​​グアンドドロップでグリッドを使用

私はこれを混ぜ合わせようとします https://material.angular.io/cdk/drag-drop/overview#reordering-lists

そしてこれ https://material.angular.io/components/grid-list/overview

しかし、不可能！

私は何かをしようとします

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

しかし、ドロップは機能しません。

明確にするために、私は this を試してみます。 "1"、 "2"、 "3"、 "4"はAngularマテリアルとドラッグ＆ドロップで交換可能です

誰かがそのようなことをなんとかして成功したことがありますか？

angulardrag-and-dropangular-materialgrid
9
Geoffrey

これを試して：

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

それは私のために働いた

0
Ali Mousavi