要素の並び替えを可能にする「MUURI」

ある商品サイトを制作していて、「商品一覧ページで、ユーザによる商品の並び替えを行いたい」というご要望がありました。
既存のスクリプトがあればな~と探していたところ、応用して使えそうなものを発見したのでメモとして残します!

やりたいこと

・商品種類別のボタンをクリックして、商品一覧をグループごとに並び替え
・選択したグループに含まれない商品は選択したグループ一覧のあとに順次表示

▸デモ
↑写真のように、「スイーツ」「フルーツ」「食事」のグループで区別される商品がランダムでならんでいて、
「スイーツ」ボタンをクリックするとスイーツグループの商品が上に表示され、その後フルーツ、食事グループの商品が並ぶようにします。詳しくはデモをみてみてください!

MUURIダウンロード

▸MUULI公式
▸Github

ソース

1.必要なファイルの読み込み

MuuriのアニメーションはWeb Animations APIを使用しており、サポートされていないブラウザで使用する場合はポリフィル用のスクリプトを使用します。
*参考URL:https://coliss.com/articles/build-websites/operation/javascript/responsive-grid-layouts-muuri.html

2.並び替えボタン生成

・わかりやすいように各ボタンにclassを付与

3.商品リストの生成

・リストの大枠を「.grid」で囲む
・並び替えを行う商品それぞれに「.item」を付与
・「.item」要素の内側に「.item-content」を付与
・「スイーツ」「フルーツ」「食事」それぞれのボタンを押したときに並ばせたい順番にdata属性をふる。
例:今回スイーツボタンを押下したとき、プリン・ケーキ・マカロン・ゼリーと並ばせたあとに元々並んでいた順に並ばせたいので、その順番通りにdata-sweetの属性を1から順にふっていきます。

4.CSSの記載

ここは、デザインに合わせて記載してください。
ただ、大枠の「.grid」には position: relative;を、各.itemにはposition: absolute;をふるのが重要なポイントです。

4.JSの記載

・Muuriの関数の呼び出し
・スイーツボタン(.sort-sweet)をクリックでdata-sweet、フルーツボタン(.sort-fruit)をクリックでdata-fruit、食事ボタン(.sort-meal)をクリックでdata-mealを並び変えるように記載
・今回.itemの子供要素にdata-sweetなどがあるため、element.children[0]としています

 

デモ

‣GO demo
以上すべて行うとデモの動きになります。機会があれば使ってみてください!