send()

更新日: 2018-07-05

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に出力します。

アイテム1
アイテム2
アイテム3
アイテム4
アイテム5
アイテム6

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


© 2015 Haltu Oy. Licensed under the MIT license

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