Static items
Mark a layout item static: true to anchor it: other tiles compact around it instead of through
it, and by default it can’t be dragged or resized.
const layout = [
{ i: "a", x: 0, y: 0, w: 3, h: 2 },
{ i: "pinned", x: 3, y: 0, w: 3, h: 2, static: true }, // never moves
{ i: "b", x: 6, y: 0, w: 3, h: 2 },
];By default static means “an obstacle during compaction that can’t be dragged or resized.” The
per-item isDraggable / isResizable flags can opt back in, though (see
pinned tiles below) — so a static tile is only fully locked
when you leave those unset.
Pinned tiles (anchored, but draggable)
Combine static: true with isDraggable: true for a tile that compaction never moves — others flow
around it — yet the user can still pick it up and reposition by hand. (isResizable: true is the
same opt-in for resizing.) Think of it as pinned: anchored against automatic reflow, but not
locked away from the user.
const layout = [
{ i: "panel", x: 0, y: 0, w: 4, h: 4, static: true, isDraggable: true }, // anchored, still draggable
{ i: "a", x: 4, y: 0, w: 4, h: 2 },
{ i: "b", x: 8, y: 0, w: 4, h: 2 },
];Notes
- Static placement is preserved by the built-in compactors (
vertical,horizontal,none) and by the masonry/gravity/shelf extra packers — each reserves static tiles and packs the rest around them. - A static tile still renders through your normal markup; style it however you like (the demo above
uses a hatched fill). snapgrid exposes the item’s state so you can branch on
item.static.
Last updated on