What is DragDoll?

DragDoll gives you all the primitives for a production-grade drag-and-drop system — sensors, draggables, droppables, and collision detection. Build sortable lists, kanban boards, design canvases, or something entirely new.

At its core, DragDoll is built on the concept of sensors, which are responsible for listening to user input events (or any events, for that matter) and emitting drag events based on those inputs. While DragDoll comes with a few built-in sensors, you can also create your own to listen to any kind of input events you desire.

To actually move elements around, DragDoll provides the Draggable class. This class acts as an orchestrator for any number of sensors and moves DOM elements based on the drag events emitted by the provided sensors. The Draggable class features a simple and functional API that allows you to control the drag process explicitly from start to finish.

For complete drag and drop experiences, DragDoll also provides DndObserver and Droppable classes, which handle collision detection between draggable elements and drop targets. Together, these three classes create a powerful foundation for building sophisticated drag and drop interfaces.

Features

📡   Sweet Sensors: Pointer, keyboard, or roll your own. Sensors normalize any input into unified drag events, giving you complete control over interactions.

🤏   Dynamic Draggables: A highly customizable Draggable system with autoscrolling superpowers, drag previews, and position modifiers. Complex scenarios made effortless.

🎯   Classy Collisions: An extendable, cache-optimized collision detection system you can build on. Ships with a visibility-aware detector that handles overflow clipping and scroll containers for you.

🔄   True Transforms: Finally, transformed elements can be dragged normally. Rotate, scale, skew to your heart's content.

😴   Dreamy DX: Smart defaults get you moving fast. Rich events and extension points give you full control when you need it.

⚡   Snappy Swipes: Pooled events, batched DOM reads/writes, cached measurements. Performance is built to the core.

💝   Lovely License: 100% MIT licensed, spread the love.