Skip to content
Get packs

Draggable

A JavaScript library for building custom drag-and-drop behavior in web pages.

GitHub Download v1.2.1
Stars
18.5k
Forks
1.1k
Licence
MIT
Language
JavaScript
Last update
11 months ago
Type
Library

This repository is archived and no longer maintained.

What it is

Draggable is a JavaScript library that lets web developers make page elements draggable and build custom drag-and-drop interactions. It wraps the browser's native drag, mouse, touch and force-touch events in a single API. It also includes optional modules for sorting, dropping and swapping items.

  • Make a list of items on a web page reorderable by dragging
  • Build a grid where items can be swapped by dragging them onto each other
  • Add drag-and-drop uploads or card boards to a web app using the Droppable module
  • Customize drag behavior by hooking into the event lifecycle or adding sensors

Great for

  • Front-end developers who want full control over how drag and drop feels and behaves
  • Projects that need sortable lists or swappable grid items on web pages
  • Teams that work with ES6 and want TypeScript definitions included

Not ideal for

  • Non-developers looking for a ready-made tool; it is a code library that must be integrated into a site (reason: it requires JavaScript coding)
  • Projects that need active maintenance or new features; the README says the repo is no longer maintained by its original authors and is archived (reason: risk of unfixed bugs)
  • Teams needing support for very old browsers; compatibility targets only the last 3 versions of major browsers (reason: older browsers are not covered)

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js and npm or yarn (for package-manager install)

    Install with npm

    npm install @shopify/draggable --save

    Install with yarn

    yarn add @shopify/draggable
  2. 2

    Run it

    • Install the package with npm or yarn
    • Import Draggable, Sortable, Droppable or Swappable into your JavaScript, or load it from the CDN
    • Point the library at a container element containing the items you want draggable
    • Open your page in a browser and drag an item to confirm it works
    • Optionally run the bundled examples with yarn && yarn start from the repo root
  3. 3

    Get the most out of it

    • Read the per-module documentation linked in the README (Draggable, Sortable, Droppable, Swappable, Plugins)
    • Use the included TypeScript definitions described in doc/typescript.md
    • Add sensors to extend how drag detection works
    • Use plugins such as Mirror, Scrollable, or SwapAnimation to adjust visuals and scrolling
    • Run the examples project locally to see working code

Downloads

Source code (.zip)main branch · straight from GitHubRelease v1.2.1Release notes and sourceOfficial website & docsshopify.github.io/draggable

Strengths

  • Abstracts native browser drag, mouse, touch and force-touch events into one API
  • Modular: you can import only Draggable, Sortable, Droppable, or Swappable, keeping the bundle small
  • Includes TypeScript definitions and is available via npm and CDN

Trade-offs

  • The repository is archived and no longer maintained by its original authors, per the README
  • Requires coding knowledge; the README offers no visual editor or no-code option
  • Documentation is spread across per-module directories rather than one guide

How it compares

ProjectStarsTypeLevelUpdatedBest for
draggable (this)18.5kLibraryintermediate11 months agoFront-end developers who want full control over how drag and drop feels and behaves
dnd-kit17.8kLibraryintermediate5 days agoDevelopers building sortable lists or grids in a React, Vue, Svelte, or Solid app
interact.js12.9kLibraryintermediate3 months agoWeb developers building drag-and-drop interfaces
muuri10.9kLibraryintermediate2.5 years agoFront-end developers building card or photo grids that need drag and drop or filtering
Sortable31.2kLibrarybeginner8 months agoWeb developers adding reorderable lists to a site or app
react-grid-layout22.5kLibraryintermediate4 days agoReact developers building dashboards with movable panels

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.