WebダッシュボードのUIであったり、ユーザがカスタマイズできるページにおいて大事なのがドラッグ&ドロップを使ってカスタマイズできるウィジェット機能です。かつてiGoogleで見られたUIは今は多くの管理画面で採用されています。 そういったページを表示する際に使えそうなのがgridstack.jsです。ウィジェットの大きさをカスタマイズする機能も備えています。

gridstack.jsの使い方

デモです。大きさがきっちり揃った状態で表示できます。

ドラッグして移動できます。

利用しているところです。マウスオーバーすると大きさを変えるアイコンが表示されます。

ウィジェットに削除するための機能を追加したサンプルもあります。

グリッドの状態を記録したり、逆にローディングもできます。JSONフォーマットになっています。

複数のグリッド間を移動することもできます。

グリッドはレスポンシブにすることもできます。

ウィジェットを動的に追加するデモです。追加時にアニメーションも実行できます。

gridstack.jsはグリッド表示系ライブラリとして欲しい機能が殆ど揃っているように見えます。大きさの変更はグリッドの並びとして善し悪しがありますが、より柔軟にカスタマイズできるとも言えるでしょう。レスポンシブWebデザインに対応しているのでデスクトップ、タブレット、スマートフォンと幅広く使えるはずです。

gridstack.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

gridstack.js troolee/gridstack.js: gridstack.js is a jQuery plugin for widget layout