STUDY SYSTEM WEBSITE Edit : 2018.08.13 Update : 2023.10.04

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

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

Contents

やりたいこと
MUURIダウンロード
ソース
1.必要なファイルの読み込み
2.並び替えボタン生成
3.商品リストの生成
4.CSSの記載
4.JSの記載
デモ

やりたいこと

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

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

MUURIダウンロード

▸MUULI公式 ▸Github

ソース

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

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
    <script type="text/javascript" src="js/muuri.js"></script>

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

2.並び替えボタン生成

    <div class="list-btn">
      <ul>
        <li class="sort-sweet"><a href="#"><button>スイーツ</button></a></li>
        <li class="sort-fruit"><a href="#"><button>フルーツ</button></a></li>
        <li class="sort-meal"><a href="#"><button>食事</button></a></li>
     </ul>
   </div>

<ul>

</ul>

</div>

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

3.商品リストの生成

    <div class="list">
      <ul class="grid">
        <li class="item"><a class="item-content" data-sweet="5" data-fruit="5" data-meal="1"><div class="meal">グラタン</div></a></li>
        <li class="item"><a class="item-content" data-sweet="6" data-fruit="1" data-meal="5"><div class="fruit">いちご</div></a></li>
        <li class="item"><a class="item-content" data-sweet="1" data-fruit="6" data-meal="6"><div class="sweet">プリン</div></a></li>
        <li class="item"><a class="item-content" data-sweet="7" data-fruit="2" data-meal="7"><div class="fruit">もも</div></a></li>
        <li class="item"><a class="item-content" data-sweet="2" data-fruit="7" data-meal="8"><div class="sweet">ケーキ</div></a></li>
        <li class="item"><a class="item-content" data-sweet="8" data-fruit="8" data-meal="2"><div class="meal">スパゲティ</div></a></li>
        <li class="item"><a class="item-content" data-sweet="9" data-fruit="3" data-meal="9"><div class="fruit">ぶどう</div></a></li>
        <li class="item"><a class="item-content" data-sweet="10" data-fruit="9" data-meal="3"><div class="meal">ピザ</div></a></li>
        <li class="item"><a class="item-content" data-sweet="11" data-fruit="4" data-meal="10"><div class="fruit">みかん</div></a></li>
        <li class="item"><a class="item-content" data-sweet="3" data-fruit="10" data-meal="11"><div class="sweet">マカロン</div></a></li>
        <li class="item"><a class="item-content" data-sweet="12" data-fruit="11" data-meal="4"><div class="meal">お茶漬け</div></a></li>
        <li class="item"><a class="item-content" data-sweet="4" data-fruit="12" data-meal="12"><div class="sweet">ゼリー</div></a></li>
      </ul>
    </div>

<li class="item"><a class="item-content" data-sweet="8" data-fruit="8" data-meal="2"><div class="meal">スパゲティ</div></a></li>

</ul>

</div>

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

4.CSSの記載

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

    .list .grid {
      position: relative; /**重要**/
      padding-left: 0;
    }
    .list .grid li {
      position: absolute; /**重要**/
      width: calc(50% - 0px);
      width: 48%;
      display: inline-block;
      padding-bottom: 10px;
      line-height: 1;
    }

.list .grid {

position: relative; /**重要**/

padding-left: 0;

}

.list .grid li {

position: absolute; /**重要**/

width: calc(50% - 0px);

width: 48%;

display: inline-block;

padding-bottom: 10px;

line-height: 1;

}

4.JSの記載

  $(function(){
      var grid = new Muuri('.grid', {
      sortData: {
        sweet: function (item, element) {
        return parseFloat(element.children[0].getAttribute('data-sweet'));
      },
        fruit: function (item, element) {
        return parseFloat(element.children[0].getAttribute('data-fruit'));
      },
        meal: function (item, element) {
        return parseFloat(element.children[0].getAttribute('data-meal'));
      }
    }
    });

      $('.list-btn li.sort-sweet').click(function(){
        grid.sort('sweet');
        return false;
      });
      $('.list-btn li.sort-fruit').click(function(){
        grid.sort('fruit');
        return false;
      });
      $('.list-btn li.sort-meal').click(function(){
       grid.sort('meal');
       return false;
      });
    });

$(function(){

var grid = new Muuri('.grid', {

sortData: {

sweet: function (item, element) {

return parseFloat(element.children[0].getAttribute('data-sweet'));

fruit: function (item, element) {

return parseFloat(element.children[0].getAttribute('data-fruit'));

meal: function (item, element) {

return parseFloat(element.children[0].getAttribute('data-meal'));

}

});

$('.list-btn li.sort-sweet').click(function(){

grid.sort('sweet');

return false;

});

$('.list-btn li.sort-fruit').click(function(){

grid.sort('fruit');

return false;

});

$('.list-btn li.sort-meal').click(function(){

grid.sort('meal');

return false;

});

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