JavaScript PR

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オブジェクトを初期化し、いくつかのウィジェットをグリッドエリアに追加します。ウィジェットはリストアイテム(

  • )として定義され、各ウィジェットのサイズや位置も指定します。

    jquery.gridster.jsを使ってドラッグ&ドロップ可能なグリッドエリアを表示するデモページ

    以下のリンクから、実際に動作するデモページを確認できます。ぜひ、自分の手でドラッグ&ドロップを試してみてください。

    jquery.gridster.jsを使ってドラッグ&ドロップ可能なグリッドエリアを表示するデモページ

    ソース元:gridster.js

    gridster.js

    このような動的なレイアウトを取り入れることで、Webアプリケーションのユーザー体験を大幅に向上させることができます。特に、カスタマイズ可能なダッシュボードや、データの視覚化に役立つウィジェットを作成する際に有用です。

    まとめ

    この記事では、jQueryプラグインのGridster.jsを使って、ドラッグ&ドロップ可能なグリッドエリアを実装する方法を紹介しました。CSS、HTML、およびJavaScriptの具体的なコード例を通じて、簡単に理解できる内容となっています。Gridster.jsを活用することで、ユーザーにとって使いやすいインタラクティブなレイアウトを実現できるため、ぜひ活用してみてください。

     
    ※流用される場合は自己責任でお願いします。
     デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。