Angular Gridster-2可重放和调整大小

Question

我是angular gridster 2的新手。

你能让我知道，如果我们能够显示已经开发的图表使用角度网格2，我也希望看到同样的方法。因为我的UI有5个不同的div块，每个div块里面都有一张卡片。

加载页面后，如何使用angular gridster显示这5张具有可拖动和可调整大小功能的卡片。

<gridster [options]="options">

<div class="col-md-12 ml-auto mr-auto" >

<div class="row"   > <!--[item]="item" *ngFor="let item of dashboard"  gridster-item-->
<gridster-item class="col-lg-3 col-md-6 col-sm-6"  [item]="item" *ngFor="let item of dashboard" >

<card1></card1>
<card2></card2>

</gridster-item>
</gridster>

export class dashboard implements oninit{

options={
    draggable: {
      enabled: true},
      resizable: {
        enabled: true
      }
  };
  dashboard = [
    {cols: 1, rows: 1, y: 0, x: 0}
  ];

}

请解释一下行、列、x和y代表什么。如果这些值发生更改，会对UI产生什么影响。

Answer 1

Cols和Rows是您的网格布局设计，以允许网格项目。如果cols = 1且rows = 1，则只能放置一个网格表项，但maxItemRows和maxItemCols设置为大于1。y和x是gridster-item的列和行索引。

例如，cols = 5，rows = 5，以及x= 3，y= 2，gridster-item将显示从第3列开始，第2行开始。

这里有一些关于gridster的文章。

https://medium.com/javascript-in-plain-english/drag-and-drop-dashboard-builder-with-angular-and-gridster-a07592e54ce2

https://developer.aliyun.com/mirror/npm/package/helio-angular-gridster