ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ユーザが自由にコンテンツを操作できるのはダッシュボード系など作業効率を求めるサイトでは最適なUIと言えます。ブロックを組み替えられるサイトは多いですが、デスクトップ向けに作られているところが多いのではないでしょうか。

Layout Gridはレスポンシブかつドラッグ&ドロップに対応したUI組み替えライブラリです。色々な場面で使えそうです。

Layout Gridの使い方

Layout Gridのデモです。このように幅、高さともに異なるグリッドが並んでいます。

ドラッグ&ドロップでグリッドが移動できます。

実際に並び替えているところ。

複数のコンテナ。これはコンテナ間の移動にも対応しています。

グリッドのリサイズにも対応。

グリッドの隙間も可変です。

Layout Gridはネイティブのドラッグ&ドロップ機能を使って実現しています。デスクトップ、スマートフォンの双方に対応しています。ユーザにコンテンツの並び替えをしてもらいたい時にぜひ使ってみてください。

Layout GridはHTML5/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

Layout Grid

clippings/layout-grid

 

MOONGIFTの関連記事

  • DevRel
  • Com2