# Scaled Drag Board > A zoomable constrained board whose draggable tile stays under the pointer with transformPagePoint. **Source:** [https://motion.svelte.page/examples/transform-page-point](https://motion.svelte.page/examples/transform-page-point) **Markdown mirror:** [https://motion.svelte.page/examples/transform-page-point.md](https://motion.svelte.page/examples/transform-page-point.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: zoomed drag board. Switch zoom levels, then drag the tile. Coordinate correction keeps its visible center under the pointer and its edges inside the measured board. **Metadata:** tag: `GESTURE` | pattern: `scaled constrained drag` ### Notes - Choose 50%, 100%, 150%, or nonuniform zoom before dragging. - The tile follows the pointer in screen space while callbacks remain in local board units. - The measured ref keeps every resting edge inside the visible board. ### Source #### Default.svelte Source file: [src/lib/examples/transform-page-point/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/transform-page-point/demos/Default.svelte) ```svelte

// transform page point zoom: {Math.round(zoomX * 100)}% × {Math.round(zoomY * 100)}%

(dragging = true)} onDragEnd={() => (dragging = false)} whileDrag={{ scale: 1.06, cursor: 'grabbing' }} aria-label="Draggable zoom-corrected tile" style={styleString(() => ({ width: '104px', height: '104px', touchAction: 'none', cursor: 'grab', backgroundColor: 'var(--brut-accent, #247768)', border: '2px solid var(--brut-ink, #0a0a0a)', boxShadow: '7px 7px 0 var(--brut-rule, #d6dedb)' }))} > {dragging ? 'MOVE' : 'DRAG'} local units

pointer locked measured bounds drag momentum: off

```