How sortablejs/sortable works
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: Sortable.js Sortable Runtime · PluginManager.js Plugin Manager · utils.js DOM Utilities · entry-defaults.js Default Entry
Components 15
Drag And Sort Core
- Sortable Runtime
src/Sortable.js - Item Animation
src/Animation.js - Event Dispatch
src/EventDispatcher.js
Optional Behaviors
- Auto Scroll
plugins/AutoScroll/AutoScroll.js - Multi Drag
plugins/MultiDrag/MultiDrag.js - Spill Handling
plugins/OnSpill/OnSpill.js - Swap Items
plugins/Swap/Swap.js
Library Entry Points
- Default Entry
entry/entry-defaults.js - Core Entry
entry/entry-core.js - Complete Entry
entry/entry-complete.js
Shared Internals
- Plugin Manager
src/PluginManager.js - DOM Utilities
src/utils.js - Browser Detection
src/BrowserInfo.js
Other components
- Library Consumer
- Browser DOM
Connections 29
- Library Consumer → Default Entry: imports
README.md - Library Consumer → Sortable Runtime: creates instance
README.md - Sortable Runtime → Browser DOM: handles drag events
src/Sortable.js - Sortable Runtime → Item Animation: uses animation
src/Sortable.js - Sortable Runtime → Event Dispatch: dispatches events
src/Sortable.js - Sortable Runtime → Plugin Manager: uses plugin hooks
src/Sortable.js - Sortable Runtime → DOM Utilities: uses DOM helpers
src/Sortable.js - Sortable Runtime → Browser Detection: checks browser support
src/Sortable.js - Event Dispatch → Plugin Manager: dispatches plugin events
src/EventDispatcher.js - DOM Utilities → Browser Detection: checks browser flags
src/utils.js - Default Entry → Sortable Runtime: exports
entry/entry-defaults.js - Default Entry → Auto Scroll: mounts
entry/entry-defaults.js - Default Entry → Spill Handling: mounts
entry/entry-defaults.js - Core Entry → Sortable Runtime: exports
entry/entry-core.js - Core Entry → Auto Scroll: includes
entry/entry-core.js - Core Entry → Spill Handling: includes
entry/entry-core.js - Complete Entry → Default Entry: extends
entry/entry-complete.js - Complete Entry → Swap Items: includes
entry/entry-complete.js - Complete Entry → Multi Drag: includes
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
plugins/AutoScroll/AutoScroll.js - Auto Scroll → Sortable Runtime: calls drag handler
plugins/AutoScroll/AutoScroll.js - Multi Drag → DOM Utilities: uses DOM helpers
plugins/MultiDrag/MultiDrag.js - Multi Drag → Event Dispatch: dispatches selection events
plugins/MultiDrag/MultiDrag.js - Swap Items → DOM Utilities: uses DOM helpers
plugins/Swap/Swap.js - Spill Handling → DOM Utilities: uses DOM helpers
plugins/OnSpill/OnSpill.js