Sortable.js: Drag-and-Drop Lists Without jQuery

What Sortable solves and who uses it

Sortable makes HTML elements reorderable by drag. The README describes it as "a JavaScript library for reorderable drag-and-drop lists", targeting modern browsers including IE9 and touch devices. The core problem it addresses is the awkwardness of building list reordering from scratch: handling pointer events, computing drop positions, triggering animations, and managing cross-list transfers all require significant code. Sortable packages that logic behind a simple `Sortable.create(element)` call. The target users are frontend developers building any kind of ordered list UI, from a simple task list to a Kanban board with multiple columns. Because it works on any HTML element, not just `ul`/`li` structures, it fits card-based layouts, grid interfaces, and custom component trees.

The native HTML5 drag-and-drop foundation

Sortable is built on the native HTML5 drag-and-drop API rather than implementing its own pointer event system. This means it delegates most of the browser interaction to the browser's own drag machinery, which has hardware-accelerated feedback on most platforms. The README lists advanced swap detection and smart auto-scrolling as features built on top of this foundation. Drag handles work alongside selectable text in the same element, which the README contrasts with voidberg's html5sortable as an improvement. CSS transforms are supported, allowing use inside transformed containers. The touch device support is also noteworthy: the same API handles mouse events on desktop and touch events on mobile, which avoids maintaining two separate code paths.

Installing Sortable and creating a first list

Install from npm:

npm install sortablejs --save

Or from Bower:

bower install --save sortablejs

Import the default bundle:

import Sortable from 'sortablejs';

For a tree-shakeable setup, import only the core:

import Sortable from 'sortablejs/modular/sortable.core.esm.js';

The most basic usage requires only an HTML list and two JavaScript lines:

<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>

var el = document.getElementById('items');
var sortable = Sortable.create(el);

The library is also on CDN. TypeScript definitions are published to @types/sortablejs, making it usable in TypeScript projects without a separate type declaration file.

Cross-list dragging and the group option

Moving items between two separate lists requires both lists to have the same `group` value. The group option also controls what each list can give and receive:

var sortable = new Sortable(el, {
	group: "name",
	sort: true,
	delay: 0,
	delayOnTouchOnly: false,
	touchStartThreshold: 0,
	disabled: false,
	store: null,
	animation: 150,

The `pull` property in the group option accepts `true`, `false`, `'clone'`, or an array of group names. The `clone` value copies the dragged item to the target list rather than moving it, which is useful for a palette where items can be used multiple times. The `put` property controls which source groups the list accepts. The `revertClone` boolean returns a cloned element to its original position after the drag ends. The `delay` option in milliseconds controls how long a press must last before dragging starts, which the README notes cannot delay on IE or Edge with native drag-and-drop due to browser restrictions. The `swapThreshold` option sets a float between 0 and 1 representing the fraction of the target element that acts as the swap zone. Setting `invertSwap` to `true` shifts the swap zone to the sides of the target, producing an "in between" insertion sort effect. These threshold mechanics are documented in a wiki article titled "Swap Thresholds and Direction" from December 2018.

Plugin architecture and modular imports

Sortable ships a plugin system. Plugins can be cherry-picked to control binary size:

import Sortable, { MultiDrag, Swap } from 'sortablejs';
Sortable.mount(new MultiDrag(), new Swap());

Default plugins like AutoScroll can be loaded separately when using the core module:

import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
Sortable.mount(new AutoScroll());

The complete bundle at `sortablejs/modular/sortable.complete.esm.js` includes all plugins. MultiDrag allows selecting and moving multiple items at once; its usage is documented in a wiki article from April 2019. The Swap plugin replaces the insertion-based sort model with a swap model where the dragged item exchanges positions with the hovered target.

Framework wrappers: React, Vue, Angular, and others

The README lists official or semi-official wrapper packages for every major framework. For React, `react-sortablejs` supports ES2015+ and there is a mixin variant for older codebases. For Vue, the Vue.Draggable project wraps Sortable with Vue bindings. Angular has two wrappers: `angular-sortablejs` for Angular 2 and above, and `angular-legacy-sortablejs` for AngularJS 1.x. Ember, Knockout, Polymer, and Meteor also have wrapper packages. jQuery users can integrate through `jquery-sortablejs`. The availability of these wrappers means the underlying library is framework-agnostic: the same core handles the drag logic while framework wrappers translate its events into framework-appropriate state updates. Bootstrap and other CSS frameworks are compatible; the README explicitly notes any CSS library works.

Limitations: IE drag restrictions, dnd-kit comparison, and maintenance

Sortable's use of the native HTML5 drag API comes with a constraint noted in the README: the `delay` option cannot delay drags on IE or Edge because those browsers do not support delayed native drag initiation. The library also predates the React hooks model; the `react-sortablejs` wrapper is an adaptation layer rather than a native React hooks implementation, which can create friction when integrating deeply with React state management. dnd-kit takes a different approach: it avoids the HTML5 drag API entirely, uses pointer and keyboard events, and is built specifically for React with hooks-first design. This makes dnd-kit more predictable inside React's rendering cycle. Sortable's strength is breadth: it works in non-React codebases, plain HTML pages, server-rendered templates, and every framework simultaneously. The package.json lists version 1.15.7, is built with Rollup and Babel, and publishes the files Sortable.js, Sortable.min.js, modular/, and src/. The maintainers listed are Konstantin Lebedev and Owen Mills. The test runner uses TestCafe with SauceLabs for cross-browser coverage. The last push was on 2026-03-24, more than six months before 2026-09-28; the most recent release before that was 1.15.6 on 2024-11-28. The project history dates to late 2013: the wiki article on sorting with the HTML5 drag-and-drop API was published on 2013-12-23 and the Sortable v1.0 new capabilities article on 2014-12-22. The README also links to a Multi-Drag guide from April 2019 and the swap thresholds article from December 2018 for the advanced swap configurations.

Editorial conclusion

Sortable.js suits projects that need drag-and-drop list reordering across multiple frameworks with minimal setup and a stable, widely-tested API. It is a poor fit for React-heavy applications that need declarative state management tightly coupled to drag events: dnd-kit, which takes a React hooks approach and does not use the native HTML5 drag API, integrates more naturally with React's rendering model. The last push to the Sortable repository was on 2026-03-24 and the most recent release was v1.15.7 on 2026-02-11. New releases have slowed, but v1.15.x is a mature, stable line.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. SortableJS/Sortable on GitHub