Grid constructor

更新日: 2018-06-14

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'
});


© 2015 Haltu Oy. Licensed under the MIT license

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