Make elements draggable (with bounds and inertia) or respond to swipe gestures in a direction.
Where: Right sidebar → Interactions → Pointer → Drag / Swipe — Add a Drag or Swipe interaction
Key ideas
- Drag options: axis, bounds (a zone selector or {minX,maxX,minY,maxY}), inertia, collideEdges, maxTravel, travelDirection.
- Swipe options: direction (up/down/left/right), threshold, reverse.
Steps
- Select the element.
- Add a Drag (or Swipe) interaction from the Pointer category.
- Set bounds/inertia for drag, or direction/threshold for swipe.
- Preview the gesture.
Drag settings
- Axis constrains movement; bounds can reference a zone or explicit minimum/maximum X and Y values.
- Max travel and travel direction can limit how far and which way the element moves; collide edges constrains travel at its bounds.
- Inertia has its own strength, bounce, and snap-grid behavior. Map to progress is a separate option when the gesture should drive a progress value.
Swipe settings
- Choose one direction (up, down, left, or right), set a threshold, and use reverse when the gesture direction should invert the response.
- A swipe is a directional gesture trigger; it is not the same as a persistent draggable element.
- Test on both pointer and touch-capable preview contexts because available gestures can differ by device.
Tips
- Start with a simple axis and a conservative threshold, then add bounds or inertia after confirming the base gesture works.
Limitations and important notes
- Gesture behavior depends on the selected target and the interaction runtime; avoid overlapping drag/swipe regions that compete for the same input.
Troubleshooting
The element moves but escapes its intended area.
Set explicit bounds or select a bounds zone, then check axis, max travel, and collide-edges behavior.