Unleash the Power of Playful Interactions.
Effortless drag & drop, resizing, and multi-touch gestures for the modern web. Trusted by 12,400+ developers and teams to make their interfaces feel alive.
const elem = document.querySelector('.draggable');
import { draggable } from 'flexigestures';
draggable(elem, {
inertia: true,
modifiers: [
snapToGrid({ size: 30 })
]
});
Trusted by teams at
Key Features that Feel Fantastic
Everything you need to build delightful, interactive interfaces without the friction.
Open Source
MIT License. Free forever. Community driven.
Snap Modifiers
Pixel-perfect grid snapping made easy.
Inertia
Realistic physics with throwable elements.
Multi-touch
Smooth simultaneous interactions.
Unified API
One API for Mouse, Touch & Pen events.
Auto Scroll
Scroll containers when dragging near edges.
How Does It Work?
Most libraries take control away from you. FlexiGestures is different. It gives you all the raw, rich pointer event data and steps back.
We believe in maximum control and flexibility. FlexiGestures doesn't move your elements directly. Instead, it provides a powerful, simple API that gives you everything you need to bring your interfaces to life. You decide the exact visual feedback.
The Flow
const library = new FlexiGestures('#interactive-area'); library.on('dragmove', (event) => { event.target.style.transform = `translate(${event.dx}px, ${event.dy}px)`; });
Interactive Demos You Can Play With
See the library in action with live examples showcasing its core capabilities.
🖱️ Dragging
1.2 kBSimple drag interaction with inertia and boundary restriction. Try to throw it!
library.draggable('#drag-box', {
inertia: true,
modifiers: [
restrictToParent()
]
})📤 Drag & Drop
1.8 kBDroppable areas with visual feedback. Drag the box to the target.
library.dropzone('#drop-zone', {
accept: '#drag-source'
})🎯 Snapping
1.1 kBSnap elements to a predefined grid. See how they align.
library.draggable('#snap-box', {
modifiers: [snapToGrid({ size: 40, range: Infinity })]
})📐 Resizing
1.5 kBResize elements from all edges and corners. Pull the corner!
library.resizable('#resize-box', {
edges: { left: true, right: true, bottom: true, top: true }
})Loved by the Community
Join thousands who have made their products feel genuinely interactive.
"FlexiGestures transformed our whiteboard app. The multi-touch support is flawless, and the library is so light it feels like magic. We shipped two weeks early."
"The only library we found that handles every input type consistently. Setting up drag, drop, and rotate for our dashboard took an afternoon, not a sprint."
"Our interactive prototypes went from 'just a mockup' to 'feels like the real thing'. The auto-scroll feature alone saved us hours of custom code."
Ready to Reimagine Your UI?
Start with the powerful, free core library. Upgrade to FlexiGestures Pro for advanced features and priority support.
- Everything in the Free Core Library
- Advanced Gesture Recognition (Pinch, Rotate, Tap & Hold)
- SVG & Canvas Optimizations
- Priority Email Support & Private Community Access