dragSortPredicate

アイテムをドラッグしている間の、 ソートプロシージャのロジックを定義します。

• 初期値 : {action: 'move', tolerance: 50}
• 値 : function、object

オブジェクトが渡された場合、 デフォルトのソートプレディケート(真偽値を返す関数)が使われます。 以下のプロパティを指定することができます。

action: string

• 初期値 : 'move'
• 指定可能な値 : 'move'、'swap'
• ドラッグされたアイテムを新しい位置に移動するか、 移動先のアイテムと入れ替える必要があるかどうかを指定します。

threshold: number

• 初期値 : 50
• 指定可能な値 : 1～100
• ドラッグされたアイテムと、対象のアイテムが、 可能性のある最大範囲のうち、何%重なったらソートをトリガーするかを指定します。

あるいは、独自のソートロジックを定義したコールバックを渡すこともできます。 コールバックは2つの引数を受け取ります。

item: Muuri.Item

ドラッグ中のアイテムです。

event: object

ドラッグイベント(Hammer.jsのイベントです)

ソートが発生しない場合、コールバックはfalseを返します。 しかし、ソートが発生した場合、 コールバックは以下のプロパティを含むオブジェクトを返す必要があります。

index: number

移動する必要のあるアイテムのインデックス。

grid: Muuri

• 移動する必要のあるアイテムを含んだグリッド。
• デフォルトではアイテムの現在のグリッドです。
• オプションです。

action: string

• 初期値 : 'move'
• 指定可能な値 : 'move'、'swap'
• 移動方法を指定します。オプションです。

// デフォルトのプレディケートを設定します。
var grid = new Muuri(elem, {
  dragSortPredicate: {
    threshold: 90,
    action: 'swap'
  }
});

// 独自のプレディケートを渡します。
var grid = new Muuri(elem, {
  dragSortPredicate: function (item, e) {
    if (e.deltaTime > 1000) {
      return {
        index: Math.round(e.deltaTime / 1000) % 2 === 0 ? -1 : 0,
        action: 'swap'
      };
    }
  }
});

デモ

ドラッグして1秒以上の場合にアイテムを移動することができます。 Math.roundを使用し、秒数を小数点以下で四捨五入しており、 ドラッグ時間が奇数秒の場合はアイテムを入れ替えず、 偶数秒の場合はアイテムを入れ替えます。
今回の例は、実践では使いづらいと思います。

JavaScript

var grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSortPredicate: function (item, e) {
    if (e.deltaTime > 1000) {
      return {
        // 2n+1(s)の場合はアイテムを入れ替えます。
        // 2n(s)の場合は入れ替えません。
        index: Math.round(e.deltaTime / 1000) % 2 === 0 ? -1 : 0,
        action: 'swap'
      };
    }
  }
});

HTML

<div class="grid">
  <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>

CSS

.grid {
  position: relative;
}

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