Sortable

Sortable is a JavaScript library for building reorderable drag-and-drop lists, using the native HTML5 drag-and-drop API with a touch-device fallback. It requires no jQuery or framework, works with any element type (not just ul/li), and supports dragging items between separate lists via a shared group configuration, along with CSS-based animations, drag handles, auto-scrolling, and multi-item drag selection.

Beyond the core library, Sortable ships an official plugin system (AutoScroll, MultiDrag, Swap, OnSpill) that can be cherry-picked to keep bundle size small, and the broader SortableJS organization maintains framework-specific wrappers for React, Vue, Angular, Ember, Meteor, Knockout, and Polymer. With over 31,000 GitHub stars and tens of millions of weekly npm downloads, it is one of the most widely used drag-and-drop libraries in the JavaScript ecosystem.

What You Get

• Native HTML5 drag-and-drop with a touch-device fallback, requiring no jQuery or UI framework
• Cross-list dragging via a shared group option, with fine control over pull/put behavior and cloning
• A cherry-pickable plugin system (AutoScroll, MultiDrag, Swap, OnSpill) to keep bundle size minimal
• Rich lifecycle events (onStart, onEnd, onAdd, onUpdate, onSort, onMove, onClone) for fine-grained integration
• Official framework wrappers maintained by the SortableJS org for React, Vue, Angular, Ember, Meteor, Knockout, and Polymer
• TypeScript type definitions available via @types/sortablejs

Common Use Cases

• Building drag-and-drop reorderable task boards or kanban columns (e.g. dragging cards between ‘To Do’ and ‘Done’ lists)
• Letting users reorder items in a settings or admin list (e.g. reordering navigation menu items or form fields)
• Implementing multi-select drag operations to move several list items at once via the MultiDrag plugin
• Adding drag-and-drop reordering to a framework app (React, Vue, Angular) through one of the official wrapper packages

Under The Hood

Architecture - Sortable is centered on a single core module (src/Sortable.js, ~2,000 lines) that manages drag state, DOM manipulation, and event dispatch, supported by smaller focused modules for animation (Animation.js), cross-browser detection (BrowserInfo.js), event dispatching (EventDispatcher.js), and a PluginManager.js that lets optional plugins (AutoScroll, MultiDrag, Swap, OnSpill) register themselves into the core drag lifecycle without bloating the base bundle. Tech Stack - Vanilla JavaScript with no runtime dependencies, distributed as UMD/ESM/CJS builds (including modular core-only and complete-with-plugins bundles) via npm, Bower, and CDNs; built with Rollup and tested via CircleCI with SauceLabs cross-browser testing. Code Quality - The project maintains a dedicated tests/ suite and has been continuously refined since 2013 with 178 contributors; as a mature, widely-adopted library it has seen its core drag/drop edge cases (nested lists, touch delay, swap thresholds) heavily battle-tested in production across thousands of downstream apps, though recent commit activity has slowed as the API has stabilized. API Design - The API centers on a single Sortable.create(el, options) call with a large, well-documented options object and named lifecycle callbacks, making basic usage nearly zero-config while still exposing deep configurability (swap thresholds, direction detection, custom onMove logic) for complex drag-and-drop scenarios.