🐟

[Angular][ライブラリ]angular-gridster2でドラッグアンドドロップ可能なタイルを実装する

に公開
Angular
ライブラリ
tech

環境

Angular13系

AngularGridster2

ドラッグアンドドロップでタイルを配置できます。
また、タイルの追加、削除、リサイズも実装できるライブラリです。

インストール

npm i angular-gridster2

インポート

import { GridsterModule } from 'angular-gridster2';

@NgModule({
  imports: [ GridsterModule ],
  ...
})

使用例

<button mat-raised-button color="primary" (click)="addItem()" aria-label="icon button with a add icon">
  <mat-icon>add</mat-icon>
</button>
<div>
  現在のinnerWidth: {{innerWidth}}
</div>

<gridster [options]="options" class="gridster-contents">
  <gridster-item [item]="item" *ngFor="let item of dashboard; index as i">
    <div class="draggable-handler">
      (ドラッグ可能域)
    </div>
    <div>
      ドラッグとリサイズが可能です
    </div>
    <div class="delete-button">
      <button mat-fab color="warn" (click)="removeItem(i)" aria-label="icon button with a delete icon">
        <mat-icon>delete</mat-icon>
      </button>
    </div>
  </gridster-item>
</gridster>

import { Component } from '@angular/core';
import { GridsterConfig, GridsterItem } from 'angular-gridster2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options: GridsterConfig = {};
  dashboard: Array<GridsterItem> = [];

  innerWidth = window.innerWidth;

  ngOnInit(): void {
    this.options = {
      gridType: 'scrollVertical', // 固定縦横比を縦スクロールで対応
      // gridType: 'scrollHorizontal', // 固定縦横比を水平スクロールで対応
      draggable: { // ドラッグ設定
        enabled: true, // ドラッグ許可
        ignoreContent: true, // dragHandleClassのみドラッグイベントを可能にする
        dragHandleClass: 'draggable-handler', // ここで指定したクラスのみドラッグイベントを可能にする
      },
      resizable: { // リサイズ設定
        enabled: true, // リサイズを許可する
      },
      swap: true, // 入れ替えを許可する
      displayGrid: 'always', // グリッド線を常に表示
      minCols: 7, // 最小列数
      maxCols: 7, // 最大列数(minCols以上はドラッグで表示される)
      minRows: 7, // 最小行数
      maxRows: 7, // 最大行数(minRows以上はドラッグで表示される)
      maxItemCols: 5, // アイテムの最大列数
      maxItemRows: 5, // アイテムの最大行数
      compactType: 'none', // 整列しない(自由)
      pushItems: true, // リサイズとドラッグでアイテムを押しのける
      mobileBreakpoint: 640, // 画面の幅が640px以下でグリッドを解除しアイテムを1列にする
    };

    this.dashboard = [
      {cols: 3, rows: 4, y: 1, x: 2}, // 初期値 横3マス, 縦4マス,をy1, x2の位置に配置
    ];
  }

  removeItem(index: number): void {
    this.dashboard.splice(index, 1); // index番目を1つ取り除く
  }

  addItem(): void {
    this.dashboard.push({cols: 3, rows: 3, y: 0, x: 0});
  }

}

.gridster-contents {
  background-color: #0bd;
  /* height: 100vh; */
  height: calc(100vh - 200px);
}
.draggable-handler {
  border: 4px dashed gray;
  text-align: center;
}
.delete-button {
  text-align: center;
}

💡 GridsterConfig型のoptionsに様々なオプションを指定できます。
指定可能なオプションはGridSterConfig型で説明します。
オプションを含んだoptionsをテンプレートの<gridster>タグのoptionsにプロパティバインドし、適応します。

💡 GridsterItem型のdashboardには各アイテムが入ります。各アイテムを定義するときに、プロパティを設定することでどのような大きさのアイテムにするか指定できます。

💡 各アイテム(GridItem)は親要素(<gridster>)の利用可能なすべてのスペースを取得します。
そのため、親要素はサイズもつ必要があります。

GridsterItem型

💡 各アイテム自体の情報 アイテムの大きさなど

インターフェース

export interface GridsterItem {
  x: number;
  y: number;
  rows: number;
  cols: number;
  layerIndex?: number;
  initCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
  dragEnabled?: boolean;
  resizeEnabled?: boolean;
  compactEnabled?: boolean;
  maxItemRows?: number;
  minItemRows?: number;
  maxItemCols?: number;
  minItemCols?: number;
  minItemArea?: number;
  maxItemArea?: number;
  [propName: string]: any;
}
  • proNameはインデックス型なので、持たせたいプロパティを自由に追加可能

例)

dashboard: Array<GridsterItem> = [];

  ngOnInit(): void {
	
  this.dashboard = [
   // ここに各アイテム自体のプロパティを記述
   {cols: 2, rows: 1, y: 0, x: 0},
   {cols: 2, rows: 2, y: 0, x: 2}
  ];

}

プロパティ

Items

プロパティ 概要 型 デフォルト
x アイテムの開始位置。x軸のマス数。指定しない場合は自動位置決めされる Number undefined
y アイテムの開始位置。y軸のマス数。指定しない場合は自動位置決めされる Number undefined
rows アイテムが占領する行数。もし足りない場合はグリッドオプション defaultItemRows を使用 Number undefined
cols アイテムが占領する列数。もし足りない場合はグリッドオプション defaultItemCols を使用 Number undefined
minItemRows オーバーライドグリッドオプションminItemRows Number undefined
maxItemRows オーバーライドグリッドオプションmaxItemRows Number undefined
minItemCols オーバーライドグリッドオプションminItemCols Number undefined
maxItemCols オーバーライドグリッドオプションmaxItemCols Number undefined
minItemArea オーバーライドグリッドオプションminItemArea Number undefined
maxitemArea オーバーライドグリッドオプションmaxItemArea Number undefined
dragEnabled オーバーライドグリッドオプションdraggable.enabled Boolean undefined
resizeEnabled オーバーライドグリッドオプションresizable.enabled Boolean undefined
compactEnabled グリッドオプションコンパクトを無効にする Boolean undefined
initCallback 初期化コールバック　サイズ > 0 関数(GridsterItem, GridsterItemComponent) undefined
resizablehandles オーバーライドグリッドオプションresizable.handles オブジェクト({s: boolean, e: boolean, n: boolean, w: boolean, se: boolean, ne:boolean, sw: boolean, nw: boolean}) undefined

GridsterConfig型

💡 各種設定やコールバック関数などを指定

インターフェース

```tsx
export interface GridsterConfig {
    gridType?: gridTypes;
    scale?: number;
    fixedColWidth?: number;
    fixedRowHeight?: number;
    keepFixedHeightInMobile?: boolean;
    keepFixedWidthInMobile?: boolean;
    setGridSize?: boolean;
    compactType?: compactTypes;
    mobileBreakpoint?: number;
    allowMultiLayer?: boolean;
    defaultLayerIndex?: number;
    maxLayerIndex?: number;
    baseLayerIndex?: number;
    minCols?: number;
    maxCols?: number;
    minRows?: number;
    maxRows?: number;
    defaultItemCols?: number;
    defaultItemRows?: number;
    maxItemCols?: number;
    maxItemRows?: number;
    minItemCols?: number;
    minItemRows?: number;
    minItemArea?: number;
    maxItemArea?: number;
    rowHeightRatio?: number;
    margin?: number;
    outerMargin?: boolean;
    outerMarginTop?: number | null;
    outerMarginRight?: number | null;
    outerMarginBottom?: number | null;
    outerMarginLeft?: number | null;
    useTransformPositioning?: boolean;
    scrollSensitivity?: number | null;
    scrollSpeed?: number;
    initCallback?: (gridster: GridsterComponentInterface) => void;
    destroyCallback?: (gridster: GridsterComponentInterface) => void;
    gridSizeChangedCallback?: (gridster: GridsterComponentInterface) => void;
    itemChangeCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
    itemResizeCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
    itemInitCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
    itemRemovedCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
    itemValidateCallback?: (item: GridsterItem) => boolean;
    draggable?: Draggable;
    resizable?: Resizable;
    swap?: boolean;
    swapWhileDragging?: boolean;
    pushItems?: boolean;
    disablePushOnDrag?: boolean;
    disablePushOnResize?: boolean;
    disableAutoPositionOnConflict?: boolean;
    pushDirections?: PushDirections;
    pushResizeItems?: boolean;
    displayGrid?: displayGrids;
    disableWindowResize?: boolean;
    disableWarnings?: boolean;
    scrollToNewItems?: boolean;
    disableScrollHorizontal?: boolean;
    disableScrollVertical?: boolean;
    enableEmptyCellClick?: boolean;
    enableEmptyCellContextMenu?: boolean;
    enableEmptyCellDrop?: boolean;
    enableEmptyCellDrag?: boolean;
    enableOccupiedCellDrop?: boolean;
    emptyCellClickCallback?: (event: MouseEvent, item: GridsterItem) => void;
    emptyCellContextMenuCallback?: (event: MouseEvent, item: GridsterItem) => void;
    emptyCellDropCallback?: (event: DragEvent, item: GridsterItem) => void;
    emptyCellDragCallback?: (event: MouseEvent, item: GridsterItem) => void;
    emptyCellDragMaxCols?: number;
    emptyCellDragMaxRows?: number;
    ignoreMarginInRow?: boolean;
    dirType?: dirTypes;
    api?: {
        resize?: () => void;
        optionsChanged?: () => void;
        getNextPossiblePosition?: (newItem: GridsterItem) => boolean;
        getFirstPossiblePosition?: (item: GridsterItem) => GridsterItem;
        getLastPossiblePosition?: (item: GridsterItem) => GridsterItem;
        getItemComponent?: (item: GridsterItem) => GridsterItemComponentInterface | undefined;
    };
    [propName: string]: any;
}
```

例)

options: GridsterConfig = {};

ngOnignit(): void {
  this.options = {
    // ここにプロパティを記述していく
  }
}

主要なプロパティ

Grid Types

💡 グリッドレイアウトのタイプなどの設定

例)

gridType: 'scrollVertial',

プロパティ

プロパティ 概要 型 デフォルト
gridType グリッドのレイアウトのタイプを指定。グリッドの種類の表を参照 String fit
fixedColWidth 列の幅を固定 Number 250
fixedRowHeight 行の高さを固定 Number 250
rowHeightRatio gridType: scrollVertical, scrollHorizontal の場合、列の幅に対する行の高さの比率 Number 1
keepFixedHeightInMobile モバイルレイアウトで固定GridTypeの高さを維持 Boolean FALSE
keepFixedWidthInMobile モバイルレイアウトで固定GridTypeの幅を維持 Boolean FALSE
useBodyForBreakpoint モバイルレイアウトに切り替えるタイミングを 要素の幅で判断する Boolean FALSE
setGridSize コンテンツに応じたグリッドサイズを設定する Boolean FALSE
mobileBreakpoint 画面の幅がこれ以上ない場合は、グリッドレイアウトを解除してアイテムを積み重ねる Number 640
  • mobileBreakpointで指定した幅以下になった場合のアイテム数は、maxColsとmaxRowsで指定した範囲に収まる数のみ

グリッドの種類

型 概要 enum
fit スクロールせずにコンテナ内のアイテムにフィットします Fit
scrollVertical アイテムとグリッドの縦横比率が同じになるように縦スクロールで対応します ScrollVertical
scrollHorizontal アイテムとグリッドの縦横比率が同じになるように横スクロールで対応します ScrollHorizontal
fixed fixedColWidth と fixedRowHeight オプションに基づいて、行と列の寸法を設定します Fixed
verticalFixed 行をfixedRowHeightに設定し、列の幅を利用可能なスペースに合わせます VerticalFixed
horizontalFixed 列をfixedColWidthに設定し、行の高さを利用可能なスペースに合わせます HorizontalFixed

Compact

💡 空きマスの詰め方 整列設定

例)

compactType: 'none',

CompactTypeというenumも定義されているので、下記のようにすることも可能。

compactType: CompactType.None,
プロパティ 概要 型 デフォルト オプション enum
compactType コンパクトアイテム String 'none' 'none', 'compactUp', 'compactLeft', 'compactUp&Left', 'compactLeft&Up', 'compactRight', 'compactUp&Right', 'compactRight&Up', 'compactDown', 'compactDown&Left', 'compactLeft&Down', 'compactDown&Right', 'compactRight&Down' None, CompactUp, CompactLeft, CompactUpAndLeft, CompactLeftAndUp, CompactRight, CompactUpAndRight, CompactRightAndUp, CompactDown, CompactDownAndLeft, CompactLeftAndDown, CompactDownAndRight, CompactRightAndDown

GridMargins

💡 グリッドやアイテム間のマージン設定

例)

margin: 5,
プロパティ 概要 型 デフォルト
margin グリッドアイテム間のマージン Number 10
outerMargin コンテナの側面に余白が適用するかどうか Boolean TRUE
outerMarginTop グリッドの上端外側のマージンをオーバーライドする Number null
outerMarginRight グリッドの右外側のマージンをオーバーライドする Number null
outerMarginBottom グリッドの底部外側マージンをオーバーライドする Number null
outerMarginLeft グリッドの左外側のマージンをオーバーライドする Number null

useTransformPositioning

アイテムの配置をtransformとtop/leftのいずれかに切り替えることができます。

プロパティ 概要 型
useTransformPositioning アイテムの配置をtransformとtop/leftのいずれかに切り替える Boolean

Grid Sizes

💡 グリッドの設定

例)

mingCols: 10,
プロパティ 概要 型 デフォルト
minCols 1画面で表示するグリッドの最小列数 Number 1
maxCols グリッドの最大列数(minCols以上はドラッグで表示される) Number 100
minRows 1画面で表示するグリッドの最大行数 Number 1
maxRows グリッドの最大行数(minRows以上はドラッグで表示される) Number 100
defaultItemCols 項目のデフォルトの幅（列） Number 1
defaultItemRows 項目のデフォルトの高さ（行） Number 1
minItemCols アイテムの最小列数 Number 1
maxItemCols アイテムの最大列数 Number 50
minItemRows アイテムの最小行数 Number 1
maxItemRows アイテムの最大行数 Number 50
minItemArea 最小アイテム領域：列数×行数 Number 1
maxItemArea 最大項目面積：列数×行数 Number 2500
addEmptyRowsCount 最後に空の行を追加する Number 0

  • minColsとminRowsは1画面上に表示する最小マス数

    • gridType: ‘fit’のときはアイテムとグリッドの比率を維持せず伸縮して表示します。

      そのため縦横のサイズは変化するが表示されるグリッド数はmaxColsとmaxRowsの値になります。

    • gridType: ‘scrollVertical’のときはminRowsがminCols未満の時、縦横比の関係で表示されるグリッド数が変化するが、maxRowsの値は変化していないので値を超えるグリッドに配置することはできません。

      gridType: ‘scrollHorizontal’も同じような挙動になります。

  • maxColsとmaxRowsは配置できる最大のマス数

    • minColsやminRowsで指定した数以上はドラッグで移動することで表示されます。

Empty Cell

💡 空のセルに対する設定

例)

enableEmptyCellClick: true,
プロパティ 概要 型 デフォルト
enableEmptyCellClick 空のセルクリックイベントを有効にする Boolean FALSE
enableEmptyCellContextMenu 空のセルのコンテキストメニュー(右クリック)イベントを有効にする Boolean FALSE
enableEmptyCellDrop 空のセルドロップのイベントを有効にする Boolean FALSE
enableEmptyCellDrag 空のセルのドラッグイベントを有効にする Boolean FALSE
enableOccupiedCellDrop 占領されたセルのドロップイベントを有効にする Boolean FALSE
emptyCellDragMaxCols 空のセルドラッグの最大列数を制限する Number 50
emptyCellDragMaxRows 空のセルドラッグの最大行数を制限する Number 50
emptyCellClickCallback 空のセルがクリックされたときのコールバック Function(event, gridsterItem) undefined
emptyCellContextMenuCallback 空のセルのコンテキストメニュー（右クリック）コールバック Function(event, gridsterItem) undefined
emptyCellDropCallback 空のセルのドラッグドロップコールバック。HTML5 ドラッグ＆ドロップ Function(event, gridsterItem) undefined
emptyCellDragCallback 空のセルをドラッグして、Excelのセルのようにアイテムを作成する Function(event, gridsterItem) undefined

Mics

例)

ignoreMarginInRow: false,
プロパティ 概要 型 デフォルト
disableWindowResize window on resizeリスナーを無効にします。これにより、ウィンドウのサイズ変更時にグリッドが再計算されなくなります Boolean FALSE
scrollToNewItems 追加したアイテムにスクロールするかどうか Boolean FALSE
disableWarnings グリッドアイテムの誤配置に関するコンソールログの警告を無効にする Boolean FALSE
ignoreMarginInRow 複数行にまたがるアイテムの行間ギャップを無視する。gridType: fixed , verticalFixed, horizontalFixed の場合のみ。 Boolean FALSE
disableAutoPositionOnConflict 競合状態でのアイテムの自動配置を無効にする Boolean FALSE
scale ズームイン/ズームアウトするためのスケールパラメータ number 1

Drag

💡 アイテムのドラッグ設定

例) 下記の場合、draggable-handlerというクラスが付いている要素(エリア)からのみドラッグイベントが可能になる。
ignoreContentがfalseの場合、gridster-itemの要素のどこからでもドラッグイベントが可能になる。

draggable: {
  enabled: true,
  ignoreContent: true,
  dragHandleClass: 'draggable-handler',
},
プロパティ 概要 型 デフォルト
draggable.delayStart ドラッグの開始を遅延させるミリ秒 Number 0
draggable.enabled ドラッグ可能なアイテムの有効化／無効化 Boolean FALSE
draggable.ignoreContent trueの場合、ドラッグはdragHandleClassの要素からだけ開始されます Boolean FALSE
draggable.dragHandleClass ignoreContent が true の時、ここで指定したクラスからのみドラッグを可能にする String 'drag-handler'
draggable.ignoreContentClass ドラッグイベントを無視するデフォルトのコンテンツクラス String 'gridster-item-content'
draggable.stop アイテムのドラッグが停止したときのコールバック。ドラッグをキャンセル／承認するためのPromise returnを受け付ける Function(item, gridsterItem, event) undefined
draggable.start アイテムのドラッグを開始したときのコールバック Function(item, gridsterItem, event) undefined
draggable.dropOverItems アイテムのドロップを有効にする。SwapとPushが無効の場合、動作する Boolean FALSE
draggable.dropOverItemsCallback アイテムをドラッグして他のアイテムにドロップしたときのコールバック Function(sourceItem, targetItem, grid) undefined
disableScrollHorizontal グリッドの端にいるときの自動水平スクロールの有効化・無効化 Boolean FALSE
disableScrollVertical グリッドの端にいるときの自動垂直スクロールの有効化/無効化 Boolean FALSE

Resize

💡 アイテムのリサイズ設定

例) リサイズ可能にする

resizable: {
  enable: true
}
プロパティ 概要 型 デフォルト
resizable.delayStart リサイズ開始を遅延させるミリ秒（タッチ操作に有効 Number 0
resizable.enabled リサイズ可能なアイテムの有効化・無効化 Boolean FALSE
resizable.stop アイテムのリサイズが停止したときのコールバック。リサイズをキャンセル/承認するためのPromiseリターンを受け取ります Function(item, gridsterItem, event) undefined
resizable.start アイテムのリサイズが開始されたときのコールバック Function(item, gridsterItem, event) undefined
resizable.handles リサイズ可能なアイテムの端 Object {s: true, e: true, n: true, w: true, se: true, ne:true, sw: true, nw: true}

Swap

💡 アイテムの入れ替え設定

プロパティ 概要 型 デフォルト
swap ドロップすると位置が入れ替わる Boolean TRUE
swapWhileDragging ドラッグ中にアイテムをスワップし、新しい位置を保存する Boolean FALSE

Push

💡 アイテムを押しのける設定

例)

pushItems: true,
プロパティ 概要 型 デフォルト
pushItems リサイズとドラッグでアイテムをプッシュする Boolean FALSE
disablePushOnDrag プッシュオンドラッグを無効にする Boolean FALSE
disablePushOnResize リサイズ時のプッシュを無効にする Boolean FALSE
pushResizeItems アイテムのサイズを変更すると、隣接するアイテムが縮小されます Boolean FALSE
pushDirections アイテムが押される方向を制御する Object {north: true, east: true, south: true, west:true}

Display Grid

💡 グリッド線の表示設定

displayGrid: 'always',
プロパティ 概要 型 デフォルト オプション
displayGrid グリッド表示 String 'onDrag&Resize' 'always', 'onDrag&Resize', 'none'
  • onDrag&Resize : ドラッグとリサイズの時
  • always : 常に
  • none : 表示しない

Grid Events

💡 コールバックイベントの設定

プロパティ 概要 型 デフォルト
initCallback グリッドが初期化された後に呼び出されるコールバック Function(gridsterComponent) undefined
destroyCallback グリッドが破棄された後に呼び出されるコールバック Function(gridsterComponent) undefined
gridSizeChangedCallback グリッドが列/行のサイズを変更した後に呼び出されるコールバック Function(gridsterComponent) undefined
itemChangeCallback 各項目の x, y, rows, cols が変更されたときに呼び出されるコールバック Function(gridsterItem, gridsterItemComponent) undefined
itemResizeCallback 幅/高さが変化したときに各項目に対して呼び出されるコールバック Function(gridsterItem, gridsterItemComponent) undefined
itemInitCallback 初期化時に各項目に対して呼び出されるコールバック Function(gridsterItem, gridsterItemComponent) undefined
itemRemovedCallback 各アイテムが削除されたときに呼び出されるコールバック Function(gridsterItem, gridsterItemComponent) undefined
itemValidateCallback アイテムの位置/サイズを検証するために呼び出すコールバック。有効な場合はtrueを返します Function(gridsterItem) undefined

コールバックインターフェース

initCallback?: (gridster: GridsterComponentInterface) => void;
destroyCallback?: (gridster: GridsterComponentInterface) => void;
gridSizeChangedCallback?: (gridster: GridsterComponentInterface) => void;
itemChangeCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
itemResizeCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
itemInitCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
itemRemovedCallback?: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => void;
itemValidateCallback?: (item: GridsterItem) => boolean;

scrollSensitivity

スクロールを開始するダッシュボードのマージン

プロパティ 概要 型
scrollSensitivity スクロールを開始するダッシュボードのマージン Number

scrollSpeed

scrollSensitivityゾーンにあるとき、マウスの動きごとにどの程度スクロールするか

プロパティ 概要 型
scrollSpeed scrollSensitivity ゾーンにあるとき、マウスの動きごとにどの程度スクロールするか Number

タグ要素

gridster

各アイテム(GridsterItem)をラップする。

<gridster [options]="options">
  • gridsterタグの[options]プロパティにGridsterConfig型のデータをバインド
  • optons : GridsterCofig型 各種設定やコールバック関数の指定など

gridster-item

各アイテムそのものを展開する。

<gridster-item [item]="item" *ngFor="let item of dashboard">
  • item : GridsterItem型 アイテムそのものの情報やアイテムの位置・サイズ情報など
  • gridster-itemタグの[item]プロパティにGridsterItem型のデータをバインド
  • アイテム情報が複数ある場合は*ngForで展開

レスポンシブ対応

画面の幅によって、グリッドのマス数を変化させる。

import { Component } from '@angular/core';
import { GridsterConfig, GridsterItem } from 'angular-gridster2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options: GridsterConfig = {};
  dashboard: Array<GridsterItem> = [];

  private gridCols = 20;
  private gridRows = 20;

  innerWidth = window.innerWidth;

  constructor() {

    // 初期化時のinnerWidthによってグリッド列数を変える
    if (1500 <= window.innerWidth) {
      this.gridCols = 30;
    } else if (1000 <= window.innerWidth) {
      this.gridCols = 13;
    } else {
      this.gridCols = 6;
    }
  }

  ngOnInit(): void {
    this.options = {
      gridType: 'scrollVertical', // 固定縦横比を縦スクロールで対応
      // gridType: 'scrollHorizontal', // 固定縦横比を水平スクロールで対応
      draggable: { // ドラッグ設定
        enabled: true, // ドラッグ許可
        ignoreContent: true, // dragHandleClassのみドラッグイベントを可能にする
        dragHandleClass: 'draggable-handler', // ここで指定したクラスのみドラッグイベントを可能にする
      },
      resizable: { // リサイズ設定
        enabled: true, // リサイズを許可する
      },
      swap: true, // 入れ替えを許可する
      displayGrid: 'always', // グリッド線を常に表示
      minCols: this.gridCols, // 最小列数
      maxCols: this.gridCols, // 最大列数(minCols以上はドラッグで表示される)
      minRows: this.gridRows, // 最小行数
      maxRows: this.gridRows, // 最大行数(minRows以上はドラッグで表示される)
      maxItemCols: 5, // アイテムの最大列数
      maxItemRows: 5, // アイテムの最大行数
      compactType: 'none', // 整列しない(自由)
      pushItems: true, // リサイズとドラッグでアイテムを押しのける
      mobileBreakpoint: 640, // 画面の幅が640px以下でグリッドを解除しアイテムを1列にする
    };

    this.dashboard = [
      {cols: 3, rows: 4, y: 1, x: 2}, // 初期値 横3マス, 縦4マス,をy1, x2の位置に配置
    ];
  }

  removeItem(index: number): void {
    this.dashboard.splice(index, 1); // index番目を1つ取り除く
  }

  addItem(): void {
    this.dashboard.push({cols: 3, rows: 3, y: 0, x: 0});
  }

}

下図のようにinnerWidthによってグリッド列数が変化します。

  • innerWidthが1500px以上
    グリッド列数が30

  • innerWidthが1000px以上1500px未満
    グリッド列数が13

  • innerWidthが1000px未満
    グリッド列数が6

画面内のグリッド数を固定する

minColsとmaxCols、minRowsとmaxRowsを同じにする。

minCols: 10,
maxCols: 10,
minRows: 8,
maxRows: 8,

画面内で表示される最小を10にし、最大値も同じなので画面内のグリッド数を固定できる。(gridTypeがscrollVerticalなど縦横比を固定する場合はminColsとminRowsはスクロールバーで対応される)

参考

https://github.com/tiberiuzuld/angular-gridster2/tree/12.x
https://tiberiuzuld.github.io/angular-gridster2/
https://ai-can-fly.hateblo.jp/entry/how-to-use-angular-gridster2

Discussion