sort

sort

grid.sort()メソッドが呼び出さた後にトリガーされます。

パラメータ

currentOrder: array

現在のソート順の全アイテムの配列。

previousOrder: array

前のソート順の全アイテムの配列。

grid.on('sort', function (currentOrder, previousOrder) {
  console.log(currentOrder);
  console.log(previousOrder);
});

デモ

data-fooを昇順、data-barを降順でソートし、 sortイベントを呼び出して、console.logを出力します。

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();
    }
  }
});
grid.on('sort', function (currentOrder, previousOrder) {
  console.log('---- currentOrder ----');
  console.log(currentOrder);
  console.log('---- previousOrder ----');
  console.log(previousOrder);
});
grid.sort('foo bar:desc');

HTML

<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;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
  color: #000;
  border: 1px solid #000;
}

.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%;
}