Angular Material 7 使用带有拖放功能的网格

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 Material
有没有人设法做这样的事情？

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