[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly

グリッドに配置したパネルをタップやドラッグ&ドロップで移動させたり、パネルの追加や削除ができるjQueryのプラグインを紹介します。

Gridly
Gridly -GitHub

• Gridlyのデモ
• Gridlyの使い方

Gridlyのデモ

デモではカラフルなパネルをタップ操作やドラッグ&ドロップ操作で移動できます。

デモページ

パネルの移動、削除、追加をアニメーションにしてみました。

デモのアニメーション

Gridlyの使い方

Step 1: 外部ファイル

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.gridly.js" type="text/javascript"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />

Step 2: HTML

各パネルはdiv要素で実装し、それらをラッパーで包みます。

<div class="gridly">
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
</div>

Step 3: CSS

デモのスタイルシートはこんな感じです。

<style type="text/css">
  .gridly
  {
    position: relative;
    width: 960px;
  }
  .brick.small
  {
    width: 60px;
    height: 60px;
  }
  .brick.large
  {
    width: 120px;
    height: 120px;
  }
</style>

Step 4: JavaScript

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

<script>
  $('.gridly').gridly();
</script>

オプション

オプションでは、ベース・溝のサイズ、カラム数を設定できます。

<script>
$('.gridly').gridly({
  base: 60, // px 
  gutter: 20, // px
  columns: 12,
});
</script>

ドラッグイベントに反応する要素を設定することもできます。

<script>
$('.gridly').gridly({
  draggable: { handle: '.move' }
});
</script>