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

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

サイトのキャプチャ

Gridster
Gridster -GitHub

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アニメーションを使ったスタイルシートファイルなどもダウンロードできます。

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

top of page

©2017 coliss