jquery.gridster.jsを使ってドラッグ＆ドロップ可能な複数のグリッドエリアを表示する方法

Webサイトやアプリケーションで、動的でインタラクティブなレイアウトを実現するために、ドラッグ＆ドロップ可能なグリッドエリアを利用することがあります。
この記事では、jQueryプラグインのGridster.jsを使って、簡単にドラッグ＆ドロップ可能なグリッドエリアを実装する方法を紹介します。具体的なコード例とともに説明していきます。

Gridster.jsとは？

Gridster.jsは、jQueryプラグインの一つで、ドラッグ＆ドロップ可能なグリッドレイアウトを簡単に作成できるツールです。このプラグインを使うことで、ユーザーはグリッド内のウィジェットを自由に移動させたり、サイズを変更したりすることができます。

CSSでグリッドエリアをスタイリング

まずは、グリッドエリアをスタイリングするためのCSSコードを見てみましょう。
jquery.gridster.min.cssファイルを読み込みます。複数のグリッドエリア（.gridster）のCSS記述です。必要に応じて変更して下さい。
以下のCSSコードを使って、Gridster.jsで使用するグリッドエリアのスタイルを定義します。

<link rel="stylesheet" type="text/css" href="jquery.gridster.min.css">
<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
p{
  padding-bottom: 20px;
}
.gridster .gs-w {
  background: #61A9CF;
  cursor: pointer;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.gridster .player {
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  background: #BBB;
}
.gridster .preview-holder {
  border: none !important;
  border-radius: 0 !important;
  background: red !important;
}
.gridster ul {
  background-color: #EFEFEF;
}
.gridster li {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  line-height: 100%;
}
ul {
  list-style-type: none;
}
li {
  list-style: none;
  font-weight: bold;
}
.controls {
  margin-bottom: 20px;
}
</style>

HTMLでグリッドエリアを作成

次に、HTMLコードでグリッドエリアを作成します。以下のHTMLコードを使って、複数のグリッドエリアを表示するエリア（class=”gridster”）を用意します。

<h1>jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示</h1>
<p>以下のグリッドエリアをドラッグ＆ドロップしてみて下さい。</p>

<div class="gridster">
    <ul></ul>
</div>

JavaScriptでグリッドエリアを設定

最後に、JavaScriptコードを使ってグリッドエリアを設定します。以下のJavaScriptコードを使って、Gridster.jsを初期化し、グリッドエリア内にドラッグ＆ドロップ可能なウィジェットを追加します。

jquery.min.js（1.7.1）、jquery.gridster.min.jsファイルを読み込みます。
$(“グリッド表示エリア”).gridster({オプション})を記述します。オプションではグリッドエリアのマージン・寸法等を設定します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" id="code">
    var gridster;

    $(function () {

        gridster = $(".gridster > ul").gridster({
            widget_margins: [5, 5],
            widget_base_dimensions: [100, 55]
        }).data('gridster');

        var widgets = [
            ['<li>0</li>', 1, 2],
            ['<li>1</li>', 3, 2],
            ['<li>2</li>', 3, 2],
            ['<li>3</li>', 2, 1],
            ['<li>4</li>', 4, 1],
            ['<li>5</li>', 1, 2],
            ['<li>6</li>', 2, 1],
            ['<li>7</li>', 3, 2],
            ['<li>8</li>', 1, 1],
            ['<li>9</li>', 2, 2],
            ['<li>10</li>', 1, 3]
        ];

        $.each(widgets, function (i, widget) {
            gridster.add_widget.apply(gridster, widget)
        });

    });
</script>

　
上記のJavaScriptコードでは、まずjQueryとGridster.jsのライブラリを読み込みます。その後、gridsterオブジェクトを初期化し、いくつかのウィジェットをグリッドエリアに追加します。ウィジェットはリストアイテム（