Basics
Draggable is a modular drag & drop library, allowing you to start small and build up with the features you need. At its most basic, Draggable gives you drag & drop functionality, fast DOM reordering, accessible markup, and a bundle of events to grab on to.
Swappable
The classic switcheroo. Drag one element over another and watch them trade places in the DOM. The ideal functionality for when layout dimensions need to be retained.
Sortable
Sort DOM nodes with style. Drag items in a collection from one spot to another and watch everything snap into place. Fast and responsive sorting that won’t leave your performance wallet strapped for frames.
Collidable
Start your game dev career and inject some collision detection. Collidable will prevent draggable elements from overlapping each other, firing collision events when the dragged source element enters and exits a restricted zone.
Accessible
Coming soonDrag & drop accessibility is a delicate flower. While browsers continue to work on a reliable native solution, Draggable lends a helping hand. All draggable elements are focusable and provide customizable screen reader announcements.
Extensible
Draggable is easy to extend. Write a custom module that provides the functionality you need, then submit it to our Github repo for review. If you needed a feature that wasn’t already available, chances are the community needs it too. Sharing is caring.
Interaction
Draggable supports most of the interaction events we could think of: mouse, touch, and force touch are all available out of the box, with accessible keyboard support coming soon!
Animation
Let’s face it, it’s annoying when plugins get in the way of your personal design touch. Draggable isn’t going to try and steal the show by forcing any unruly animation styles on you. Simply take your pick from our healthy serving of CSS selectors and style to your heart’s desire.