Muuri

To use Muuri, your HTML must follow these rules:

1. Grid Container: Every grid needs a container element.
2. Grid Items: Each item must consist of at least two elements:
   • An outer element used for positioning.
   • An inner element (the first direct child of the outer element) used for animating visibility (show/hide). This is your 'safe zone' for custom markup.

Example structure:

<div class="grid">
  <div class="item">
    <div class="item-content">
      <!-- Your custom content goes here -->
    </div>
  </div>
</div>

<div class="grid">
  <div class="item">
    <div class="item-content">
      <!-- Safe zone, enter your custom markup -->
      This can be anything.
      <!-- Safe zone ends -->
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <!-- Safe zone, enter your custom markup -->
      <div class="my-custom-content">
        Yippee!
      </div>
      <!-- Safe zone ends -->
    </div>
  </div>
</div>

Muuri requires specific CSS properties to function correctly:

• Grid Element: Must have a CSS position of relative, absolute, or fixed.
• Grid Element Overflow: Never set overflow: auto; or overflow: scroll; directly on the grid element. This causes item jumping during drags. Instead, wrap the grid in a container and set the overflow on that wrapper.
• Item Elements: Must have position: absolute;.
• Item Animations: Do not apply CSS transitions or animations to the item elements themselves, as they will conflict with Muuri's internal engine.
• Gaps: Use margin on the item elements to control spacing between items.

Example CSS:

.grid {
  position: relative;
}
.item {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
  background: #000;
  color: #fff;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

Proper CSS positioning is required for Muuri to function correctly:

1. Grid Element: Must have position set to relative, absolute, or fixed. Never set overflow: auto; or overflow: scroll; directly on the grid element; use a wrapper element instead to avoid layout jumps during dragging.
2. Item Elements: Must have position: absolute; and display: block;.
3. Animations: Do not apply CSS transitions or animations to the item elements themselves, as they will conflict with Muuri's internal engine.
4. Gaps: Use margin on the item elements to control spacing between items.

Example CSS:

.grid {
  position: relative;
}
.item {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
  background: #000;
  color: #fff;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

To use Muuri, your HTML must follow a specific structure:

1. Grid Container: A single container element (the grid element).
2. Grid Items: Each item must consist of at least two elements:
   • Outer Element: Used by Muuri for positioning.
   • Inner Element (the first direct child of the outer element): Used by Muuri to animate visibility (show/hide methods). You can place your custom content inside this inner element.

Example markup:

<div class="grid">
  <div class="item">
    <div class="item-content">
      <!-- Your custom content goes here -->
      This is the safe zone.
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <div class="my-custom-content">Yippee!</div>
    </div>
  </div>
</div>

<div class="grid">
  <div class="item">
    <div class="item-content">
      <!-- Safe zone, enter your custom markup -->
      This can be anything.
      <!-- Safe zone ends -->
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <!-- Safe zone, enter your custom markup -->
      <div class="my-custom-content">Yippee!</div>
      <!-- Safe zone ends -->
    </div>
  </div>
</div>

Customize the logic that determines when an item starts moving during a drag.

Option 1: Object configuration Provide an object to configure the default predicate:

• distance: Number. Pixels to drag before movement starts. Default 0.
• delay: Number. Milliseconds to wait before movement starts. Default 0.

Option 2: Custom function Provide a function function(item, event) that returns true to start moving or false to prevent movement.

Note: If providing a custom function, you should call Muuri.ItemDrag.defaultStartPredicate(item, e) for the final event (e.isFinal) and for standard behavior to ensure internal state is reset correctly.

// Configure the default predicate
var grid = new Muuri(elem, {
  dragStartPredicate: {
    distance: 10,
    delay: 100,
  },
});

// Provide your own predicate with fallback
var grid = new Muuri(elem, {
  dragStartPredicate: function (item, e) {
    if (e.isFinal) {
      Muuri.ItemDrag.defaultStartPredicate(item, e);
      return;
    }

    // Prevent first item from being dragged.
    if (grid.getItems()[0] === item) {
      return false;
    }

    return Muuri.ItemDrag.defaultStartPredicate(item, e);
  },
});