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

【问题标题】：Angular material 7 use grid with drag and dropAngular Material 7 使用带有拖放功能的网格
【发布时间】：2019-05-09 13:57:59
【问题描述】：

我尝试在这两者之间进行混合 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>

但是drop不起作用。

为了清楚起见，我尝试做this，“1”、“2”、“3”、“4”可通过拖放互换与 Angular 材料

有没有人做过类似的事情？

【问题讨论】：

它确实有效，但效果不佳。我怀疑它与 MatGridList 以及它的动态布局方式有关。
@Goeffrey 你有什么进展吗？
你不能用 flexbox 和 CSS 方式解决这个问题吗？这意味着你的水平 1x4 列表分成 2x2 矩阵？
我花了一整天的时间试图实现同样的目标，但没有成功。然后我阅读了材料拖放文档，看起来我们应该只制作垂直或水平列表 --> 列表方向： cdkDropList 指令假定默认情况下列表是垂直的。这可以通过将方向属性设置为“水平”来更改。
kreuzerk.github.io/ng-sortgrid

标签： angular drag-and-drop angular-material grid

【解决方案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

【讨论】：

唯一的问题是，我无法让它在 angular 8 中工作
同意，在 Angular 10 中也不起作用，可能出于同样的原因。
这应该适用于 Angular 8 及更高版本 - stackblitz.com/edit/angular-dyz1eb
哪个版本？你能创建一个stackblitz吗？我会帮你的。
不再工作了。需要稍作改进。见这里：stackoverflow.com/a/63979423/1177597

【解决方案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>

对我有用

【讨论】：

[cdkDropListData]="l1" l1 来自哪里？
它只是一个数组名

【解决方案3】：

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

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

【讨论】：