SortableJS — Reorderable Drag-and-Drop Lists for the Web

Introduction

SortableJS gives any HTML list or grid drag-and-drop reordering with zero dependencies. It works on both desktop and touch devices out of the box, handles nested lists, and supports dragging items between containers. Official adapters for React, Vue, and Angular make it easy to integrate with any modern framework.

What SortableJS Does

• Turns any list or grid into a sortable drag-and-drop interface
• Supports moving items between multiple connected lists
• Works on touch devices with native touch event handling
• Provides smooth CSS-based animation during reorder operations
• Ships with official framework bindings for React, Vue 2/3, and Angular

Architecture Overview

SortableJS listens for mouse and touch events on a container element. When a drag starts, it clones the dragged element as a ghost and tracks pointer position to determine the drop target. Reordering is performed by manipulating the DOM directly, swapping or inserting elements at the computed index. The library uses CSS transforms for animation and dispatches events at each lifecycle stage: start, move, end, add, remove, and sort.

Self-Hosting & Configuration

• Install via npm or include the UMD bundle from a CDN
• Call Sortable.create(element, options) to activate on any container
• Use group option to link multiple lists for cross-container dragging
• Configure handle, filter, and draggable selectors to control what can be dragged
• For React, use react-sortablejs; for Vue, use vue-draggable-plus or vuedraggable

Key Features

• Zero dependencies and under 10 KB gzipped
• Nested sortable lists with automatic scroll during drag
• Multi-drag plugin for selecting and moving multiple items at once
• Swap plugin for swapping items instead of inserting
• AutoScroll built in for long lists that exceed viewport height

Comparison with Similar Tools

• dnd-kit — React-specific with hooks-based API; SortableJS is framework-agnostic
• React Beautiful DnD — Atlassian library now archived; SortableJS is actively maintained
• React DnD — lower-level drag-and-drop primitives; SortableJS is higher-level and list-focused
• Dragula — simple drag-and-drop between containers; SortableJS adds sorting, nesting, and plugins
• HTML Drag and Drop API — native browser API with inconsistent behavior; SortableJS normalizes it

FAQ

Q: Does SortableJS work with touch devices? A: Yes. It handles touch events natively without additional libraries or polyfills.

Q: Can I drag items between different lists? A: Yes. Set the group option to the same name on multiple Sortable instances to enable cross-list dragging.

Q: How do I persist the new order? A: Listen to the onEnd or onSort event, read the updated indices, and save the new order to your backend.

Q: Does it work with virtual/windowed lists? A: SortableJS manipulates DOM nodes directly, so it works best with fully rendered lists. For virtualized lists, use a framework adapter that bridges the virtual state.

Sources

• https://github.com/SortableJS/Sortable
• https://sortablejs.github.io/Sortable
• https://github.com/SortableJS/react-sortablejs