Question

我尝试在这两者之间混合 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材质互换

有人曾经做过类似的事情吗？

Answer 1

这是一种解决方法-我们可以使用cdkDropListGroup并创建两个cdkDropList，其中一个就像占位符，而使用cdkDropListEnterPredicate可以允许用户水平移动项目同时手动更新Dom以显示占位符。当用户放下物品时，我们必须手动更新dom并将其移入数组。

这个人围绕flex-wrap创作了一个作品。

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

对于Angular Material版本7.3.7及更高版本- https://stackblitz.com/edit/angular-dyz1eb

Answer 2

尝试一下：

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

对我有用

Answer 3

这可能会派上用场：Link D&D-Dashbord

角材料7使用带有拖放功能的网格

3 个答案: