わずか数行で組める、ドラッグ&ドロップダッシュボードGridStack.js

はじめに

「ユーザーが自由にウィジェットを並び替えられるダッシュボードを作りたい」——そんな要望を受けて、ドラッグ&ドロップやリサイズの処理を自前で実装しようとした経験はありませんか。要素同士の衝突判定、グリッドへのスナップ、モバイルでのタッチ操作対応など、考え始めるとキリがない機能ばかりです。

GridStack.jsは、そんな「動かせる・伸び縮みするダッシュボード」を数行のコードで実現してくれるライブラリです。今回はその特徴と使い方を、実際のコード例とともに紹介します。

説明を読むより、実際にドラッグやリサイズを試した方が早いと思います。先に挙動を確認したい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

GridStack.jsとは

GridStack.jsは「Build interactive dashboards in minutes（数分でインタラクティブなダッシュボードを構築する）」を掲げるTypeScript製のグリッドレイアウトライブラリです。ドラッグによる並び替えとリサイズが可能なウィジェットを、レスポンシブなマルチカラムレイアウトの中に配置できます。

v6以降はjQueryへの依存がなくなり、Vanilla JSだけで動作するようになりました。GitHub上でも活発に開発が続いており、2026年時点の最新メジャーバージョンはv13です。

主な特徴

フレームワーク非依存 - Vanilla JSはもちろん、React・Vue・Angular・Emberなど主要フレームワークとの連携例が公式に用意されている
ドラッグ&ドロップとリサイズが標準搭載 - ウィジェットの移動・拡大縮小・衝突回避といった処理を自前で書く必要がない
モバイル対応 - ネイティブのタッチイベントに対応しており、スマートフォンやタブレットでも直感的に操作できる
柔軟なレイアウト制御 - 列数のカスタマイズ、ブレークポイントごとのレスポンシブ設定、ネストしたグリッドにも対応

インストール

npmまたはyarnでインストールします。

npm install gridstack

yarn add gridstack

GridStack.jsのサンプルを動かす

実際に手を動かして触れるサンプルを用意しました。GridStack.init()でグリッドを初期化し、addWidget()でウィジェットを追加しています。下のプレビューでは3つのウィジェットをドラッグで並び替えたり、右下の角をつまんでリサイズしたりできます。「ウィジェットを追加」ボタンを押すと、addWidget()が呼ばれて新しいウィジェットがその場で増えます。

要点だけを抜き出すと、次のようなコードでグリッドの初期化とウィジェットの追加ができます。

import { GridStack } from 'gridstack'

const grid = GridStack.init({
  column: 12,
  cellHeight: 60,
  float: true,
})

grid.addWidget({
  w: 3,
  h: 2,
  content: '<div>ウィジェット</div>',
})

実際に動かせるものが下です。ウィジェットをドラッグして位置を入れ替えたり、枠の右下をドラッグして大きさを変えたりしてみてください。

column: 12で列数を12に、cellHeight: 60で1セルの高さを60pxに設定しています。この数値を変えると、グリッドの密度や1マスの大きさが変わるので、自分のダッシュボードに合わせて調整してみてください。float: trueを外すと、ウィジェットを動かしたときに上に詰めて配置されるようになります。

基本的な使い方

まずはCSSとJSを読み込み、grid-stackクラスを持つコンテナを用意します。

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>

<div class="grid-stack">
  <div class="grid-stack-item" gs-w="2">
    <div class="grid-stack-item-content">Item 1</div>
  </div>
  <div class="grid-stack-item" gs-w="4">
    <div class="grid-stack-item-content">Item 2</div>
  </div>
</div>

<script type="module">
  import { GridStack } from 'gridstack';

  const grid = GridStack.init();
</script>

gs-w属性で初期の幅（列数）を指定できます。GridStack.init()を呼び出すだけで、この時点からすべてのアイテムがドラッグ・リサイズ可能になります。

JavaScriptからウィジェットを追加する

HTMLを直接書かず、動的にウィジェットを追加することも可能です。

import { GridStack } from 'gridstack';

const grid = GridStack.init({
  column: 12,
  cellHeight: 70,
  margin: 8,
});

grid.addWidget({
  w: 3,
  h: 2,
  content: '<div>売上グラフ</div>',
});

grid.addWidget({
  w: 3,
  h: 2,
  x: 3,
  content: '<div>アクセス数</div>',
});

columnでグリッドの列数、cellHeightで1セルの高さ、marginでウィジェット間の余白を指定できます。

実践的なユースケース

レイアウトの保存・復元

管理画面のカスタマイズ可能なダッシュボードを想定し、GridStack.jsのsave()とload()を使ってレイアウトの保存・復元を行う例を見てみましょう。

import { GridStack } from 'gridstack';

const grid = GridStack.init({
  column: 12,
  float: true,
});

// ユーザーがレイアウトを変更するたびに保存
grid.on('change', () => {
  const layout = grid.save(false);
  localStorage.setItem('dashboard-layout', JSON.stringify(layout));
});

// 保存済みレイアウトがあれば復元
const saved = localStorage.getItem('dashboard-layout');
if (saved) {
  grid.load(JSON.parse(saved));
} else {
  grid.addWidget({ w: 4, h: 2, content: '<div>ウィジェットA</div>' });
  grid.addWidget({ w: 4, h: 2, content: '<div>ウィジェットB</div>' });
}

save()でレイアウト情報（各ウィジェットの位置とサイズ）をJSONとして取得し、load()で復元できるため、ユーザーごとに異なるダッシュボードのカスタマイズ状態を永続化する用途に向いています。実際に動かせるサンプルが下です。ウィジェットをドラッグやリサイズしたあとに「保存」を押すとlocalStorageにレイアウトが記録され、「復元」を押すとそのレイアウトに戻ります。「初期化」を押すと最初の配置に戻せます。

float: trueを指定すると、ウィジェットを移動した際に自動で詰めずに好きな位置に配置できるようになります。save(false)の引数をtrueにすると、DOMの内容（content）も含めて保存できます。

列数を動的に切り替える

レスポンシブなダッシュボードでは、画面幅に応じて列数を変えたい場面があります。GridStack.jsはcolumn()メソッドで、初期化後でも列数をその場で変更できます。

import { GridStack } from 'gridstack';

const grid = GridStack.init({ column: 12 });

document.getElementById('col-6').addEventListener('click', () => {
  grid.column(6);
});