角材料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>

但是下降是行不通的。

为了清楚起见，我尝试通过与Angular材质拖放来互换“ 1”，“ 2”，“ 3”，“ 4” 来执行此操作

有没有人做过这样的事情？

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

如果有人有兴趣如何执行 @ndrajeet 对 Angular 12 的回答中的版本 - https://stackblitz.com/edit/angular-ivy-hhqtt3?file=src/app/app.component.ts。

仅使用 Angular 2-3 周，所以几乎可以肯定还有很多需要改进的地方。但至少它正在工作:)