Grid constructor

Muuriはコンストラクタ関数であり、 必ずnewキーワードでインスタンス化する必要があります。 このドキュメントでは、Muuriインスタンスを"グリッド"と記載しています。

Muuri( element, [options] )

element: element, string

要素を直接指定するか、セレクタを指定します。 セレクタを指定した場合、内部的にquerySelector()を使用します。 初期値はnullです。

opsions: object

オプションです。 グリッドオプションを参照して下さい。

デフォルトオプション

デフォルトオプションはMuuri.defaultOptionsオブジェクトに格納されており、 以下の設定が含まれています。

{

  // アイテム要素
  items: '*',

  // 表示アニメーション
  showDuration: 300,
  showEasing: 'ease',

  // 非表示アニメーション
  hideDuration: 300,
  hideEasing: 'ease',

  // アイテムの表示/非表示状態のスタイル
  visibleStyles: {
    opacity: '1',
    transform: 'scale(1)'
  },
  hiddenStyles: {
    opacity: '0',
    transform: 'scale(0.5)'
  },

  // レイアウト
  layout: {
    fillGaps: false,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
    rounding: true
  },
  layoutOnResize: 100,
  layoutOnInit: true,
  layoutDuration: 300,
  layoutEasing: 'ease',

  // ソート
  sortData: null,

  // ドラッグ&ドロップ
  dragEnabled: false,
  dragContainer: null,
  dragStartPredicate: {
    distance: 0,
    delay: 0,
    handle: false
  },
  dragAxis: null,
  dragSort: true,
  dragSortInterval: 100,
  dragSortPredicate: {
    threshold: 50,
    action: 'move'
  },
  dragReleaseDuration: 300,
  dragReleaseEasing: 'ease',
  dragHammerSettings: {
    touchAction: 'none'
  },

  // クラス名
  containerClass: 'muuri',
  itemClass: 'muuri-item',
  itemVisibleClass: 'muuri-item-shown',
  itemHiddenClass: 'muuri-item-hidden',
  itemPositioningClass: 'muuri-item-positioning',
  itemDraggingClass: 'muuri-item-dragging',
  itemReleasingClass: 'muuri-item-releasing'

}

オプションは以下のように、簡単に変更することができます。

Muuri.defaultOptions.showDuration = 400;
Muuri.defaultOptions.dragSortPredicate.action = 'swap';

以下はオプションの設定方法です。

// 最小設定
var gridA = new Muuri('.grid-a');

// いくつかのオプションを設定。
var gridB = new Muuri('.grid-b', {
  items: '.item'
});