Drag gesture
Also called draggable element or drag interaction
Moving an element by pressing on it and sliding the pointer or finger, usually within set bounds and with a glide after release.
import { useRef } from 'react';
import { motion } from 'motion/react';
// How far the card stretches past an edge before it pulls back (0 to 1).
const EDGE_ELASTIC = 0.15;
export function DraggablePhoto({
src,
caption
}: {
src: string;
caption: string;
}) {
const bounds = useRef<HTMLDivElement>(null);
return (
<div
ref={bounds}
className='relative h-80 w-full overflow-hidden rounded-2xl bg-muted'
>
<motion.figure
drag
dragConstraints={bounds}
dragElastic={EDGE_ELASTIC}
// Momentum is on by default; these settings shape the soft bounce
// when the glide hits an edge.
dragTransition={{ bounceStiffness: 300, bounceDamping: 20 }}
whileDrag={{ scale: 1.04 }}
// touch-none: a touch drag moves the card instead of scrolling the page.
className='absolute top-6 left-6 w-40 cursor-grab touch-none rounded-xl bg-background p-2 shadow-lg active:cursor-grabbing'
>
<img
src={src}
alt=''
draggable={false}
className='aspect-square w-full rounded-lg object-cover'
/>
<figcaption className='mt-2 text-xs text-muted-foreground'>
{caption}
</figcaption>
</motion.figure>
</div>
);
}Make the photo card draggable inside its container with Motion: constrain it to the container's edges with 15% elastic overscroll, scale it to 1.04 while dragging, and let it glide with momentum after release, bouncing softly off the edges. Set touch-action: none on the card so dragging on phones does not scroll the page.
Paste into Layerwise or any AI coding tool.
What is Drag gesture?
A drag gesture lets people pick up an element and move it directly: press, move, release. A good drag follows the pointer exactly while held, stays inside sensible bounds, and stretches a little when pulled past an edge, so the limit feels soft.
On release, momentum carries the element in the direction it was thrown and slows it down gradually, like sliding a card across a table. Turn momentum off for things that should stay exactly where they are dropped, such as a sticky note on a board.
Drags power sliders, bottom sheets, carousels, maps, and canvas editors. Add touch-action: none to the draggable element so a touch drag moves it instead of scrolling the page, and offer a keyboard or button alternative for anything important.
Often confused with
- Drag and drop
- Drag and drop moves an item onto a target to do something, like dropping a file into a folder. A drag gesture is the movement itself, with or without a target.
Related terms
All termsMomentum
The glide an element keeps after a throw or flick, slowing down gradually like an object sliding across a smooth table.
Rubber-banding
An edge effect where content dragged past its limit moves less than your finger, then springs back on release, like a stretched rubber band.
Swipe to dismiss
A gesture where you drag an item sideways past a threshold to remove it, while a shorter swipe lets it spring back into place.
Drag to reorder
A list you can rearrange by dragging an item to a new spot while the other items slide aside to make room.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
