explaingit

shopify/draggable

★ 18,451JavaScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · easy

TLDR

A JavaScript library that gives you full control over drag-and-drop interactions in the browser, with a unified API that works consistently across mouse, touch, and other input methods.

Mindmap

mindmap
  root((repo))
    What it does
      Drag and drop control
      Mouse and touch events
      Visual feedback
      Lifecycle events
    Core features
      Sortable lists
      Droppable zones
      Swappable elements
    Plugins
      Collision detection
      Snapping
      Scrolling
      Animations
    Tech stack
      JavaScript ES6
      TypeScript definitions
    Use cases
      Reorderable lists
      Custom drop zones
      Element swapping

Things people build with this

USE CASE 1

Build reorderable lists and kanban boards where users can drag items to rearrange them.

USE CASE 2

Create custom drop zones that accept dragged elements and trigger actions when items are deposited.

USE CASE 3

Swap the positions of two elements by dragging one onto another.

USE CASE 4

Add visual feedback like mirrors and animations to make drag interactions feel smooth and responsive.

Tech stack

JavaScriptES6TypeScript

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial, as long as you keep the copyright notice.

In plain English

Draggable is a JavaScript library that gives developers full control over drag and drop behavior in the browser. Rather than relying on the browser's built-in drag and drop, the library translates native mouse, touch, force touch, and drag events into a unified, consistent API that works the same way across different environments. The core module handles the heavy lifting: creating a visual copy of the dragged item (called a mirror), emitting events at each stage of the drag lifecycle, and managing how elements are detected and moved. Built on top of this core are additional modules, Sortable for reordering items in a list, Droppable for designating areas where items can be deposited, and Swappable for exchanging the positions of two elements. There are also plugins for features like collision detection, snapping, scrolling, and animations. The library is written targeting ES6 and includes TypeScript type definitions. It can be installed via a package manager or loaded from a content delivery network. Documentation lives alongside the source code in each module's directory. The readme notes that the original authors at Shopify no longer maintain the project and are looking for new contributors to take over issue triage, code review, and bug fixes.

Copy-paste prompts

Prompt 1
Show me how to set up Draggable to make a list of items reorderable by dragging.
Prompt 2
How do I use Draggable to create a drop zone that accepts dragged items and logs when something is dropped?
Prompt 3
Create a simple example using Draggable's Swappable module to let users exchange positions of two elements.
Prompt 4
How can I add collision detection and snapping to my Draggable implementation?
Prompt 5
Show me how to handle drag lifecycle events (start, move, end) with Draggable to update the UI.
Open on GitHub → Explain another repo

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