$ show SortableJS/Sortable
SortableJS is a mature, standalone JavaScript library for creating reorderable drag-and-drop lists and grids. It supports mouse, touch, and pointer events across modern browsers and legacy browsers like IE11 and Edge. The library is designed as a modular system with a core (Sortable class) and optional plugins (AutoScroll, Swap, MultiDrag, OnSpill) that can be mounted selectively. It exports UMD and ESM builds, integrates with major frameworks (React, Vue, Angular) via separate adapter packages, and provides a rich API with options for grouping, animation, handles, filtering, and custom events. The codebase demonstrates a well-thought-out plugin architecture, event dispatching, and animation state management, though some build tooling and browser workarounds show its age.
The LLM identified 3 files worth highlighting for reuse:
Manages mounting and lifecycle of plugins for Sortable. Provides static `pluginEvent` method to dispatch events to all mounted plugins, allowing them to hook into drag-start, drag-over, drop, and destroy phases. Plugin classes define `pluginName`, `utils`, `eventOptions`, and prototype events. This pattern is reusable for any library that needs a clean plugin extension mechanism.
Implements a state machine for animating DOM elements during sorting. It captures element positions via `captureAnimationState`, then applies CSS transforms and transitions via `animateAll` and `animate`. The `animate` function uses `requestAnimationFrame` for smooth transitions. This module is self-contained and could be extracted to provide generic element position animation for any drag-and-drop or reordering UI.
Implements automatic scrolling when dragging near the edges of a scrollable container. It detects the nearest scrollable ancestor using `getScrollAutoScrollParents`, applies throttled scroll adjustments, and supports nested scroll containers. The plugin is fully encapsulated, using only Sortable's plugin API, and could be reused as a standalone scroll-while-dragging utility with minimal adaptation.