React Architecture Concept • Core Motion Model
Draggable: Constrained 2D Drag, Inertia & Physics Snapping in React
Building a production-grade draggable interaction requires solving multiple complex physics problems simultaneously: tracking pointer delta coordinates, calculating velocity upon release, applying throw inertia, enforcing boundary constraints, and handling rubber-band edge resistance. While legacy tools like GSAP Draggable require extensive imperative setup, ExodeUI turns any component into a physics-enabled draggable surface with declarative constraint boundaries, automatic touch-event normalization, and hardware-accelerated snapping.
Dragging in ExodeUI happens inside the animation file: the runtime handles the pointer input and the physics, and your code can read the result through inputs and events.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React from 'react';
import { ExodeUICanvas } from 'exodeui';
export function KanbanCard() {
return (
<div className="kanban-slot">
<ExodeUICanvas
src="/scenes/draggable-card.json"
stateMachine="DragMachine"
inputs={{
"axis": "both", // "x" | "y" | "both"
"bounds": { left: -150, right: 150, top: -200, bottom: 200 },
"snapToGrid": 20,
"inertia": 0.92
}}
onTrigger={(event) => {
if (event.name === 'snapComplete') {
console.log('Snapped to column position');
}
}}
/>
</div>
);
}Frequently Asked Questions about draggable
How does ExodeUI Draggable handle mobile touch scrolling conflict?
ExodeUI utilizes directional pointer analysis to distinguish intentional drag gestures from vertical window scrolls, ensuring pages do not lock up unexpectedly on mobile.
Can draggable elements snap to arbitrary custom target coordinates?
Yes. Snap targets can be defined as static numerical grids or dynamic array coordinates representing drop zones, docking bays, or list slots.
Does ExodeUI calculate release momentum automatically?
Yes. Release velocity is calculated over the final 100ms of pointer travel to provide realistic physical inertia and throw deceleration.