Skip to content
Get packs

Sortable

A small JavaScript library for drag-and-drop reordering of lists, with no framework required.

GitHub Download 1.15.7
Stars
31.2k
Forks
3.7k
Licence
MIT
Language
JavaScript
Last update
8 months ago
Type
Library

What it is

Sortable is a JavaScript library that lets people reorder list items by dragging them, either within one list or between lists. It works with touch devices and modern browsers, and does not need jQuery or a specific UI framework. Developers add it to a page to make lists sortable without writing their own drag logic.

  • Let users reorder items in a to-do or task list
  • Drag items between two lists, such as moving tasks between columns
  • Add drag handles so only part of each list item starts a drag
  • Allow reordering of multiple selected items with the MultiDrag plugin

Great for

  • Web developers adding reorderable lists to a site or app
  • Teams using React, Vue, Angular, or similar frameworks who want a framework-specific wrapper
  • Projects that need drag handles, multi-drag, or moving items between lists
  • Developers who want a library with a simple options-based API

Not ideal for

  • Non-developers who want a finished app; this is a code library that must be added to a project
  • Projects needing drag-and-drop for non-list layouts, since the README focuses on lists
  • Anyone needing guaranteed support for very old browsers beyond what the README states (it mentions IE9)
Step-by-step guide: how to use SortableInstall, first run, examples, tips and FAQs
Sortable alternativesDragula vs Sortablednd-kit vs SortableMuuri vs Sortable

How to get it

  1. 1

    Install with a package manager

    Install with NPM

    npm install sortablejs --save

    Install with Bower

    bower install --save sortablejs
  2. 2

    Run it

    • Install the package with npm install sortablejs --save
    • Import it in your project with import Sortable from 'sortablejs';
    • Create a list in HTML, such as a ul with li items
    • Call Sortable.create on the list element with your chosen options
  3. 3

    Get the most out of it

    • Use the group option to allow dragging between multiple lists
    • Use the handle option to limit where a drag can start
    • Use the animation option to set animation speed when items move
    • Mount the MultiDrag or Swap plugins with Sortable.mount for extra behavior
    • Use onEnd and read evt.oldIndex and evt.newIndex to save the new order

Downloads

Source code (.zip)master branch · straight from GitHubRelease 1.15.7Release notes and sourceOfficial website & docssortablejs.github.io/Sortable/

Strengths

  • Works on touch devices and modern browsers, per the README
  • Simple API with many documented options and callbacks such as onEnd and onAdd
  • Has framework wrappers listed in the README for several popular frameworks

Trade-offs

  • Requires writing JavaScript and HTML integration; not a drop-in tool for non-coders
  • Some advanced behavior depends on plugins that must be mounted separately
  • The README is truncated, so full API details must be checked in the project's documentation

How it compares

ProjectStarsTypeLevelUpdatedBest for
Sortable (this)31.2kLibrarybeginner8 months agoWeb developers adding reorderable lists to a site or app
dnd-kit17.8kLibraryintermediate5 days agoDevelopers building sortable lists or grids in a React, Vue, Svelte, or Solid app
muuri10.9kLibraryintermediate2.5 years agoFront-end developers building card or photo grids that need drag and drop or filtering
react-sortable-hoc10.9kLibraryintermediate3.2 years agoExisting React projects that already use react-sortable-hoc and need security fixes only
dragula22.1kLibrarybeginner2.4 years agoFront-end developers who want drag-and-drop without a large framework
draggable18.5kLibraryintermediate11 months agoFront-end developers who want full control over how drag and drop feels and behaves

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.