Flat UIにぴったり!ドラッグ&ドロップに対応したグリッドを実装する「jQuery Gridly」

「jQuery Gridly」はオブジェクトをグリッド上に並べ、ドラッグ&ドロップによるソート、削除機能のUIを提供するjQueryプラグインです。

jQuery Gridly

screenshot331

ちょうど今作っているWebサービスにこの手の機能が欲しかったのです。自分で実装してしまったので、時既に遅しですが。。。
こういう機能はTwitter Bootstrapなり、jQuery UIを使えば実装できるので初心者の方は勉強がてら挑戦してみるとよいです。が、既にその域を超えている方には手間ですよね。

こんな具合にドラッグ&ドロップができます。

screenshot332

 

タイルをクリックすると縦横比が2倍になり、グリッドが並び変わります。これはかっこいいエフェクトですね。

screenshot333

 

それでは「jQuery Gridly」の実装方法をご紹介します。まずは外部ファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.gridly.js"></script>
<link href="jquery.gridly.css" rel="stylesheet" type="text/css" />

 

HTMLはこのようにマークアップします。

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

 

CSSはこのように指定します。

.gridly
{
  position: relative;
  width: 960px;
}
.brick.small
{
  width: 60px;
  height: 60px;
  background-color: orange;
}
.brick.large
{
  width: 120px;
  height: 120px;
  background-color: red;
}

 

JavaScriptはこのように実装します。とても簡単ですね。

$('.gridly').gridly();
$('.gridly').gridly('draggable');

 

するとこのように作ることができました。グリッド表示でドラッグ&ドロップができます。他の機能は上記リンク先よりページのソースを確認していただけると実装することができるかと思います。

screenshot334

 

トップページがカラーパレットのようでフラットデザインの参考にもなります。ぜひ参考にどうぞ。

 

Home > JavaScript > Flat UIにぴったり!ドラッグ&ドロップに対応したグリッドを実装する「jQuery Gridly」

Return to page top