[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri

レンガ状のカードやリスト状のパネルをドラッグ&ドロップで移動したり、フィルタリングやソートも可能なレスポンシブ対応のグリッドを簡単に実装できるスクリプトを紹介します。通常だと複数のライブラリを組み合わせないと実装できませんが、これ一つで軽量に実装できます。

Muuriとは「壁（Wall）」を意味するフィンランド語だそうです。

Muuri
Muuri -GitHub

• Muuriの特徴
• Muuriのデモ
• Muuriの使い方

Muuriの特徴

• レスポンシブ対応
• レイアウトのカスタマイズは自由自在
• パネルのドラッグ&ドロップに対応
• ネストされたグリッドに対応
• 高速で快適なアニメーション
• フィルタリングやソート機能を装備
• IE9+もサポート
• MITライセンス

Muuriのデモ

デモでは、Muuriのさまざまなレイアウトを実際に楽しめます。

Gridのデモは、Masonryのようなグリッドレイアウトです。

デモ: Grid

各パネルのドラッグ&ドロップ、フィルタリングやソート機能を備えており、軽快なアニメーションでレイアウトを楽しめます。

デモのアニメーション

レスポンシブにも対応しています。

デモを幅900pxで表示

Kanbanは看板でしょうか。

デモ: Kanban

各アイテムのパネルをドラッグ&ドロップで自由に並べ替えできます。

デモのアニメーション

Muuriの使い方

Step 1 :外部ファイル

当スクリプトを外部ファイルとして記述します。
CDNでも配信されています。

MuuriのアニメーションはWeb Animations APIを使用しており、サポートされていないブラウザで使用する場合はポリフィル用のスクリプトを使用します。

Step 2: HTML

すべてのグリッドにコンテナ要素が必要となります。グリッドのアイテムは入れ子で実装し、外側は配置のために、内側はアニメーションのために使用されます。内側には任意の要素を配置することができます。

Step 3: CSS

コンテナには「position: relative;」を、各アイテムには「position: absolute;」を指定します。サイズやカラーには特に制限はありません。

Step 4: JavaScript

コンテナを指定し、スクリプトを初期化します。