[JS]パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるスクリプト -Gridster

CSS3アニメーションのかっこいいエフェクトを伴って、パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるjQueryのプラグインを紹介します。

Gridster
Gridster -GitHub

• Gridsterのデモ
• Gridsterの使い方

Gridsterのデモ

デモではパネルがグリッドに沿って配置されています。

Gridsterのデモ

「drag me!」のパネルをドラッグしてみてください。

パネルはグリッドに沿って、カラムをまたいでも移動できます。移動した際に他のパネルは指定した縦列・横列数とマージンを維持します。
他のパネルも移動可能です。

対応ブラウザ

• Internet Explorer 9+
• Firefox
• Chrome
• Safari
• Opera

Gridsterの使い方

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="jquery.gridster.js"></script>

HTML

パネル状の各エレメントはリスト要素で実装されています。

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。

$(function(){
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });
});

ファイルのダウンロード

スクリプトをはじめ、CSS3アニメーションを使ったスタイルシートファイルなどもダウンロードできます。

• Gridster -ダウンロード

実装の詳細はドキュメントをご覧ください。

• Gridster -ドキュメント