# sortablejs/sortable architecture

> Architecture diagram of the GitHub repository sortablejs/sortable, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sortablejs/sortable
- Repository: https://github.com/sortablejs/sortable

## Overview

Sortable is a browser-side JavaScript library for dragging items within and between lists, then reporting the resulting changes through callbacks and events. The main workflow is a consumer creating a Sortable instance on a DOM list; Sortable handles pointer or drag events, moves items, and uses animation and event-dispatch helpers. Optional capabilities include auto-scroll, multi-drag, swapping, and spill handling. The README documents these features and entry points; some core and plugin wiring is unsampled, so uncertain links are omitted or marked unverified.

Main entry points: [`src/Sortable.js`](https://github.com/sortablejs/sortable/blob/master/src/Sortable.js) (Sortable Runtime), [`src/PluginManager.js`](https://github.com/sortablejs/sortable/blob/master/src/PluginManager.js) (Plugin Manager), [`src/utils.js`](https://github.com/sortablejs/sortable/blob/master/src/utils.js) (DOM Utilities), [`entry/entry-defaults.js`](https://github.com/sortablejs/sortable/blob/master/entry/entry-defaults.js) (Default Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Drag And Sort Core"]
  node_sortable["Sortable Runtime<br/>[Sortable.js]"]
  node_animation["Item Animation<br/>[Animation.js]"]
  node_events["Event Dispatch<br/>[EventDispatcher.js]"]
end

subgraph group_plugins["Optional Behaviors"]
  node_autoscroll["Auto Scroll<br/>[AutoScroll.js]"]
  node_multidrag["Multi Drag<br/>[MultiDrag.js]"]
  node_spill["Spill Handling<br/>[OnSpill.js]"]
  node_swap["Swap Items<br/>[Swap.js]"]
end

subgraph group_api["Library Entry Points"]
  node_defaults["Default Entry<br/>[entry-defaults.js]"]
  node_coreentry["Core Entry<br/>[entry-core.js]"]
  node_complete["Complete Entry<br/>[entry-complete.js]"]
end

subgraph group_internals["Shared Internals"]
  node_pluginmanager["Plugin Manager<br/>[PluginManager.js]"]
  node_utilities["DOM Utilities<br/>[utils.js]"]
  node_browser["Browser Detection<br/>[BrowserInfo.js]"]
end

node_consumer(("Library Consumer"))
node_dom["Browser DOM"]

node_consumer -->|"imports"| node_defaults
node_consumer -->|"creates instance"| node_sortable
node_sortable -->|"handles drag events"| node_dom
node_sortable -->|"uses animation"| node_animation
node_sortable -->|"dispatches events"| node_events
node_sortable -->|"uses plugin hooks"| node_pluginmanager
node_sortable -->|"uses DOM helpers"| node_utilities
node_sortable -->|"checks browser support"| node_browser
node_events -->|"dispatches plugin events"| node_pluginmanager
node_utilities -->|"checks browser flags"| node_browser
node_defaults -->|"exports"| node_sortable
node_defaults -->|"mounts"| node_autoscroll
node_defaults -->|"mounts"| node_spill
node_coreentry -->|"exports"| node_sortable
node_coreentry -->|"includes"| node_autoscroll
node_coreentry -->|"includes"| node_spill
node_complete -->|"extends"| node_defaults
node_complete -->|"includes"| node_swap
node_complete -->|"includes"| node_multidrag
node_pluginmanager -.->|"dispatches hooks"| node_autoscroll
node_pluginmanager -.->|"dispatches hooks"| node_multidrag
node_pluginmanager -.->|"dispatches hooks"| node_spill
node_pluginmanager -.->|"dispatches hooks"| node_swap
node_autoscroll -->|"uses scroll helpers"| node_utilities
node_autoscroll -->|"calls drag handler"| node_sortable
node_multidrag -->|"uses DOM helpers"| node_utilities
node_multidrag -->|"dispatches selection events"| node_events
node_swap -->|"uses DOM helpers"| node_utilities
node_spill -.->|"uses DOM helpers"| node_utilities

click node_sortable "https://github.com/sortablejs/sortable/blob/master/src/Sortable.js"
click node_animation "https://github.com/sortablejs/sortable/blob/master/src/Animation.js"
click node_events "https://github.com/sortablejs/sortable/blob/master/src/EventDispatcher.js"
click node_defaults "https://github.com/sortablejs/sortable/blob/master/entry/entry-defaults.js"
click node_coreentry "https://github.com/sortablejs/sortable/blob/master/entry/entry-core.js"
click node_complete "https://github.com/sortablejs/sortable/blob/master/entry/entry-complete.js"
click node_pluginmanager "https://github.com/sortablejs/sortable/blob/master/src/PluginManager.js"
click node_utilities "https://github.com/sortablejs/sortable/blob/master/src/utils.js"
click node_browser "https://github.com/sortablejs/sortable/blob/master/src/BrowserInfo.js"
click node_autoscroll "https://github.com/sortablejs/sortable/blob/master/plugins/AutoScroll/AutoScroll.js"
click node_multidrag "https://github.com/sortablejs/sortable/blob/master/plugins/MultiDrag/MultiDrag.js"
click node_spill "https://github.com/sortablejs/sortable/blob/master/plugins/OnSpill/OnSpill.js"
click node_swap "https://github.com/sortablejs/sortable/blob/master/plugins/Swap/Swap.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_sortable,node_animation,node_events,node_dom toneBlue
class node_autoscroll,node_multidrag,node_spill,node_swap toneAmber
class node_defaults,node_coreentry,node_complete toneMint
class node_pluginmanager,node_utilities,node_browser toneRose
class node_consumer toneIndigo
```

## Components

### Drag And Sort Core

- [Sortable Runtime](https://github.com/sortablejs/sortable/blob/master/src/Sortable.js): `src/Sortable.js`
- [Item Animation](https://github.com/sortablejs/sortable/blob/master/src/Animation.js): `src/Animation.js`
- [Event Dispatch](https://github.com/sortablejs/sortable/blob/master/src/EventDispatcher.js): `src/EventDispatcher.js`

### Optional Behaviors

- [Auto Scroll](https://github.com/sortablejs/sortable/blob/master/plugins/AutoScroll/AutoScroll.js): `plugins/AutoScroll/AutoScroll.js`
- [Multi Drag](https://github.com/sortablejs/sortable/blob/master/plugins/MultiDrag/MultiDrag.js): `plugins/MultiDrag/MultiDrag.js`
- [Spill Handling](https://github.com/sortablejs/sortable/blob/master/plugins/OnSpill/OnSpill.js): `plugins/OnSpill/OnSpill.js`
- [Swap Items](https://github.com/sortablejs/sortable/blob/master/plugins/Swap/Swap.js): `plugins/Swap/Swap.js`

### Library Entry Points

- [Default Entry](https://github.com/sortablejs/sortable/blob/master/entry/entry-defaults.js): `entry/entry-defaults.js`
- [Core Entry](https://github.com/sortablejs/sortable/blob/master/entry/entry-core.js): `entry/entry-core.js`
- [Complete Entry](https://github.com/sortablejs/sortable/blob/master/entry/entry-complete.js): `entry/entry-complete.js`

### Shared Internals

- [Plugin Manager](https://github.com/sortablejs/sortable/blob/master/src/PluginManager.js): `src/PluginManager.js`
- [DOM Utilities](https://github.com/sortablejs/sortable/blob/master/src/utils.js): `src/utils.js`
- [Browser Detection](https://github.com/sortablejs/sortable/blob/master/src/BrowserInfo.js): `src/BrowserInfo.js`

### Other components

- **Library Consumer**
- **Browser DOM**

## Connections

- Library Consumer → Default Entry: imports (evidence: `README.md`)
- Library Consumer → Sortable Runtime: creates instance (evidence: `README.md`)
- Sortable Runtime → Browser DOM: handles drag events (evidence: `src/Sortable.js`)
- Sortable Runtime → Item Animation: uses animation (evidence: `src/Sortable.js`)
- Sortable Runtime → Event Dispatch: dispatches events (evidence: `src/Sortable.js`)
- Sortable Runtime → Plugin Manager: uses plugin hooks (evidence: `src/Sortable.js`)
- Sortable Runtime → DOM Utilities: uses DOM helpers (evidence: `src/Sortable.js`)
- Sortable Runtime → Browser Detection: checks browser support (evidence: `src/Sortable.js`)
- Event Dispatch → Plugin Manager: dispatches plugin events (evidence: `src/EventDispatcher.js`)
- DOM Utilities → Browser Detection: checks browser flags (evidence: `src/utils.js`)
- Default Entry → Sortable Runtime: exports (evidence: `entry/entry-defaults.js`)
- Default Entry → Auto Scroll: mounts (evidence: `entry/entry-defaults.js`)
- Default Entry → Spill Handling: mounts (evidence: `entry/entry-defaults.js`)
- Core Entry → Sortable Runtime: exports (evidence: `entry/entry-core.js`)
- Core Entry → Auto Scroll: includes (evidence: `entry/entry-core.js`)
- Core Entry → Spill Handling: includes (evidence: `entry/entry-core.js`)
- Complete Entry → Default Entry: extends (evidence: `entry/entry-complete.js`)
- Complete Entry → Swap Items: includes (evidence: `entry/entry-complete.js`)
- Complete Entry → Multi Drag: includes (evidence: `entry/entry-complete.js`)
- Plugin Manager → Auto Scroll: dispatches hooks
- Plugin Manager → Multi Drag: dispatches hooks
- Plugin Manager → Spill Handling: dispatches hooks
- Plugin Manager → Swap Items: dispatches hooks
- Auto Scroll → DOM Utilities: uses scroll helpers (evidence: `plugins/AutoScroll/AutoScroll.js`)
- Auto Scroll → Sortable Runtime: calls drag handler (evidence: `plugins/AutoScroll/AutoScroll.js`)
- Multi Drag → DOM Utilities: uses DOM helpers (evidence: `plugins/MultiDrag/MultiDrag.js`)
- Multi Drag → Event Dispatch: dispatches selection events (evidence: `plugins/MultiDrag/MultiDrag.js`)
- Swap Items → DOM Utilities: uses DOM helpers (evidence: `plugins/Swap/Swap.js`)
- Spill Handling → DOM Utilities: uses DOM helpers (evidence: `plugins/OnSpill/OnSpill.js`)