dragSort

ドラッグ中にアイテムソートは必要でしょうか？ ソートだけであれば、単にboolean値を指定するだけで対応することができます。

一方、特定のアイテムを、別のグリッドにドラッグしてソートする高度な手法もあります。 それを行うには、ドラッグされたアイテムを最初の引数として受け取り、 グリッドのインスタンス配列を返す関数を用意する必要があります。 ここで重要な点は、 ドラッグしたアイテムを、ソートしたい全てのグリッドインスタンスに返す必要があります。 空の配列を返した場合、ドラッグされたアイテムはソートされません。

• 初期値 : true
• 値 : boolean、function

// ドラッグソートを無効化
var grid = new Muuri(elem, {
  dragSort: false
});

// 複数グリッドでのドラッグソート
var gridA = new Muuri(elemA, {dragSort: getAllGrids});
var gridB = new Muuri(elemB, {dragSort: getAllGrids});
var gridC = new Muuri(elemC, {dragSort: getAllGrids});

function getAllGrids(item) {
  return [gridA, gridB, gridC];
}

デモ

グリッド間を超えて、各アイテムをドラッグソートすることができます。

JavaScript

JavaScript

// 複数グリッドでのドラッグソート
var gridA = new Muuri('.grid1', {
  dragEnabled: true,
  dragSort: getAllGrids
});
var gridB = new Muuri('.grid2', {
  dragEnabled: true,
  dragSort: getAllGrids
});
var gridC = new Muuri('.grid3', {
  dragEnabled: true,
  dragSort: getAllGrids
});

function getAllGrids(item) {
  return [gridA, gridB, gridC];
}

HTML

<div class="grid1">
  <div class="item">
    <div class="item-content">アイテム1</div>
  </div>
  <div class="item">
    <div class="item-content">アイテム2</div>
  </div>
  <div class="item">
    <div class="item-content">アイテム3</div>
  </div>
</div>
<div class="grid2">
  <div class="item">
    <div class="item-content">アイテム4</div>
  </div>
  <div class="item">
    <div class="item-content">アイテム5</div>
  </div>
  <div class="item">
    <div class="item-content">アイテム6</div>
  </div>
</div>
<div class="grid3">
  <div class="item">
    <div class="item-content">アイテム7</div>
  </div>
  <div class="item">
    <div class="item-content">アイテム8</div>
  </div>
  <div class="item">
    <div class="item-content">アイテム9</div>
  </div>
</div>

CSS

.grid1,
.grid2,
.grid3 {
  position: relative;
  border: 1px solid #000;
  margin: 1px 0;
}

.item {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
  color: #000;
  border: 1px solid #000;
}

.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}