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

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

Contents

jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示するCSS記述
jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示するHTML記述
jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するJavaScriptの記述
jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示するデモページ
ソース元：gridster.js

jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示するCSS記述

※jquery.gridster.min.cssファイルを読み込みます。複数のグリッドエリア（.gridster）のCSS記述です。必要に応じて変更して下さい。

<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>

jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示するHTML記述

※複数のグリッドエリアを表示するエリア（class=”gridster”）を用意します。

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

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

jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するJavaScriptの記述

※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>