send()

grid.send( item, grid, position, [options] )

アイテムを別のグリッドに移動します。

パラメータ

item: element, Muuri.Item, number

移動するアイテムを指定します。 アイテムのインスタンス/要素/インデックスを定義します。

grid: Muuri

移動先のグリッドを指定します。

position: element, Muuri.Item, number

新しいグリッドでのアイテムの位置を指定します。 アイテムのインスタンス/要素/インデックスを定義します。

options.appendTo: element

• 初期値 : document.body
• レイアウトアニメーション中に、 移動するアイテム要素をどの要素に追加するかを指定します。

options.layoutSender: boolean, function, string

• 初期値 : true
• デフォルトでは、このメソッドの最後に、送信元のグリッドに対してgrid.layout()メソッドが呼び出されます。 この引数を指定すると、grid.layout()メソッドの呼び出しを制御することができます。grid.layout()メソッドを完全に無効にするには、falseを指定します。 また、grid.layout()メソッドのコールバックを指定することもできます。 さらに、'instant'を指定すると、 アニメーション無しで、すぐにgrid.layout()メソッドが実行されます。 オプションです。

options.layoutReceiver: boolean, function, string

• 初期値 : true
• デフォルトでは、このメソッドの最後に、送信先のグリッドに対してgrid.layout()メソッドが呼び出されます。 この引数を指定すると、grid.layout()メソッドの呼び出しを制御することができます。grid.layout()メソッドを完全に無効にするには、falseを指定します。 また、grid.layout()メソッドのコールバックを指定することもできます。 さらに、'instant'を指定すると、 アニメーション無しで、すぐにgrid.layout()メソッドが実行されます。 オプションです。

戻り値

無し^*1

*1 ソース上はインスタンスを返しています。

// gridAの最初のアイテムをgridBの最後の位置に移動します。
gridA.send(0, gridB, -1);

// gridAの最初のアイテムをgridBの最後の位置に移動します。
gridA.send(0, gridB, -1, {
  appendTo: someElem
});

// アイテムを別のグリッドに送り、
// レイアウトが終了したら、何か処理します。
gridA.send(0, gridB, -1, {
  layoutSender: function (isAborted, items) {
    // ここに処理を追加します。
  },
  layoutReceiver: function (isAborted, items) {
    // ここに他の処理を追加します。
  }
});

デモ

grid1のアイテム1をgrid2の末尾に移動します。 移動後のグリッド内のアイテム数をconsole.logに出力します。

JavaScript

var gridA = new Muuri('.grid1');
var gridB = new Muuri('.grid2');
gridA.send(0, gridB, -1, {
  layoutSender: function (isAborted, items) {
    console.log('gridA item count : ' + items.length);
  },
  layoutReceiver: function (isAborted, items) {
    console.log('gridB item count : ' + items.length);
  }
});

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>

CSS

.grid1,
.grid2 {
  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%;
}