• かちびと.net

    ドラッグ&ドロップによる再配置も可能な、タイル状に要素を配置するjQueryプラグイン・jQuery.Shapeshiftのご紹介。Pinterestライクなレイアウトを実装出来ます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ドラッグ&ドロップによる再配置も可能な、タイル状に要素を配置するjQueryプラグイン・jQuery.Shapeshift

スポンサーリンク

要素をタイル状に配置してくれる、というjQueryプラグイン。特に目新しいものでは無いですけど。Pinterestライクなレイアウトを実装出来る、と言ったほうが伝わりやすいかも知れませんね。

Pinterestライクなレイアウトを実装出来て且つ、並べた要素をD&Dで移動、再配列してくれる、というもの。使うシーンは限られそうですけど面白いですね。

jQuery.Shapeshift


ドラッグ&ドロップで配列してる要素を自動で再配置してくれます。上図は画像になっていますが、ボックス要素に対応できるので応用が利きそうです。touch-punchを使ってタッチデバイスに対応させることも出来るようです。

ただ、再配置後の記憶をしないとなのでcookieやlocalStorage等を併用する必要があります。

コード

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/JavaScript" src="jquery.shapeshift.min.js"></script>

本体とライブラリを読み込みます。

$('.foo').shapeshift();

初期化。

$('.foo').shapeshift({
  animated: true,
  animatedOnDrag: true,
  centerGrid: true,
  columns: null,
  draggable: true,
  objWidth: null,
  gutterX: 10,
  gutterY: 10,
  resizable: true,
  selector: ""
});

設定出来るオプションは上記の通り。

動作サンプルとダウンロードは以下よりどうぞ。

jQuery.Shapeshift / on github

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services