sortData

更新日: 2018-02-09

データをソートするgetter関数 この関数は、ソート可能な属性名のキーを持ったオブジェクトを受け取り、 アイテムをソートするための(アイテムから取得した)値を返します。

  • 初期値 : null
  • 値 : objectnull
var grid = new Muuri(elem, {
  sortData: {
    foo: function (item, element) {
      return parseFloat(element.getAttribute('data-foo'));
    },
    bar: function (item, element) {
      return element.getAttribute('data-bar').toUpperCase();
    }
  }
});
// アイテムのdata-fooまたは、data-barが変わる度にソートされます。
grid.refreshSortData();
// fooとbarでソートします。
grid.sort('foo bar');

デモ

各ボタンを押すとソートされます。

foo:1、bar:"a"
foo:3、bar:"c"
foo:2、bar:"e"
foo:6、bar:"F"
foo:2、bar:"D"
foo:4、bar:"B"

JavaScript

var grid = new Muuri('.grid', {
  sortData: {
    foo: function (item, element) {
      return parseFloat(element.getAttribute('data-foo'));
    },
    bar: function (item, element) {
      return element.getAttribute('data-bar').toUpperCase();
    }
  }
});
 
// ボタンを押すたびにソートします。
document.querySelector('.sort-foo').addEventListener('click', function () {
  grid.sort('foo');
});
document.querySelector('.sort-bar').addEventListener('click', function () {
  grid.sort('bar');
});
document.querySelector('.sort-foobar').addEventListener('click', function () {
  grid.sort('foo bar');
});

HTML

<button class="sort-foo">data-fooでソート</button>
<button class="sort-bar">data-barでソート</button>
<button class="sort-foobar">data-foo、data-barでソート</button>
<div class="grid">
  <div class="item no1" data-foo="1" data-bar="a">
    <div class="item-content">
      foo:1、bar:"a"
    </div>
  </div>
  <div class="item no2" data-foo="3" data-bar="c">
    <div class="item-content">
      foo:3、bar:"c"
    </div>
  </div>
  <div class="item no3" data-foo="2" data-bar="e">
    <div class="item-content">
      foo:2、bar:"e"
    </div>
  </div>
  <div class="item no4" data-foo="6" data-bar="F">
    <div class="item-content">
      foo:6、bar:"F"
    </div>
  </div>
  <div class="item no5" data-foo="2" data-bar="D">
    <div class="item-content">
      foo:2、bar:"D"
    </div>
  </div>
  <div class="item no6" data-foo="4" data-bar="B">
    <div class="item-content">
      foo:4、bar:"B"
    </div>
  </div>
</div>

CSS

.grid {
  position: relative;
}
 
.item {
  display: block;
  position: absolute;
  margin: 5px;
  z-index: 1;
  background: #000;
  color: #fff;
}
 
.no1 {
  width: 60%;
  height: 100px;
}
 
.no2 {
  width: 30%;
  height: 100px;
}
 
.no3 {
  width: 30%;
  height: 100px;
}
 
.no4 {
  width: 25%;
  height: 100px;
}
 
.no5 {
  width: 40%;
  height: 100px;
}
 
.no6 {
  width: 35%;
  height: 100px;
}
 
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}


© 2015 Haltu Oy. Licensed under the MIT license

このコンテンツはHaltuによるMuuriドキュメントを翻訳/改変したものです。