Snap to Grid

Use the grid prop on DragPreview to snap the floating preview to a pixel grid while dragging.

:grid="40" — snaps 40 × 40 px

How it works

Pass :grid to DragPreview inside the #preview slot of DnDProvider:

<DnDProvider>
  <template #preview>
    <!-- uniform 40 × 40 px grid -->
    <DragPreview :grid="40" />
  </template>
</DnDProvider>

For independent per-axis control, pass an object:

<DnDProvider>
  <template #preview>
    <!-- 80 px horizontal, 40 px vertical -->
    <DragPreview :grid="{ x: 80, y: 40 }" />
  </template>
</DnDProvider>

TIP

Grid snapping is purely visual — it affects only the rendered position of the DragPreview. The underlying pointer coordinates and drop logic are unchanged. Use suggestSort / suggestSwap in onDrop as usual.

See also

• DragPreview — full grid prop reference.
• Constraint Area — axis lock and restrictToArea in detail.

Source

• Example.vue
• SnapChip.vue
• GridCanvas.vue