sortablejs/sortable

★ 31,115JavaScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · easy

Mindmap

mindmap
  root((Sortable))
    What it does
      Drag-and-drop reordering
      Smooth animations
      Cross-device support
    How it works
      HTML5 Drag API
      Touch fallback
      Event system
    Use cases
      Task management
      Kanban boards
      Playlist editors
    Tech stack
      Vanilla JavaScript
      No dependencies
      TypeScript definitions
    Configuration
      Multi-list groups
      Clone vs move
      Drop zones

mindmap root((Sortable)) What it does Drag-and-drop reordering Smooth animations Cross-device support How it works HTML5 Drag API Touch fallback Event system Use cases Task management Kanban boards Playlist editors Tech stack Vanilla JavaScript No dependencies TypeScript definitions Configuration Multi-list groups Clone vs move Drop zones

Things people build with this

USE CASE 1

Build a to-do app where users drag tasks to reorder or move them between lists.

USE CASE 2

Create a Kanban board where cards can be dragged between columns and synced to a backend.

USE CASE 3

Build a form builder that lets users reorder fields by dragging them up or down.

USE CASE 4

Make a playlist editor where users drag songs to change the play order.

Tech stack

JavaScriptHTML5 Drag APICSS animationsTypeScript

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Sortable is a JavaScript library that adds drag-and-drop reordering to lists and grids in a web page. The problem it solves is a common UI need: users want to rearrange items, tasks in a to-do list, columns in a dashboard, cards in a Kanban board, by picking them up with a mouse or finger and dropping them in a new position. Implementing this from scratch with the browser's raw drag-and-drop API is awkward and inconsistent across devices, especially on touch screens. Sortable handles all of that for you with a simple setup call. Under the hood, the library uses the browser's native HTML5 Drag and Drop API where available and falls back to pointer-event tracking on touch devices. You point it at any container element, a <ul>, a <div>, a grid, and it makes all direct children draggable. As the user drags an item, Sortable plays smooth CSS animations and shows a ghost placeholder where the item will land. It emits events at each stage of a drag (start, move, end, add to another list, remove from a list) so you can sync the new order to a database or update your application state. You can also configure groups of lists so items can be dragged between them, cloned rather than moved, or restricted to specific drop zones. You would use Sortable when building task management tools, file managers, playlist editors, form builders with reorderable fields, or any interface where users need to sequence or organize items visually. Because it has no dependencies, no jQuery, no React, no framework required, it fits into any project. Official wrapper packages exist for React, Vue, Angular, Knockout, Polymer, and Ember for those who prefer framework-integrated solutions. The tech stack is plain JavaScript, available on npm or via CDN, with TypeScript type definitions available separately.

Copy-paste prompts

Prompt 1

Show me how to set up Sortable.js on a simple HTML list so users can drag items to reorder them.

Prompt 2

How do I make two separate lists in Sortable.js where items can be dragged from one list to another?

Prompt 3

I want to trigger a function every time a user finishes dragging an item in Sortable.js. How do I listen for the drop event?

Prompt 4

Can I use Sortable.js with React? Show me an example of integrating it into a React component.

Prompt 5

How do I add a visual placeholder or ghost element while dragging in Sortable.js?

Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.