Shared Lists Drag & Drop
The Shared Lists pattern is an advanced interaction model that enables seamless data transfer between multiple independent containers. By breaking the boundaries of traditional single-list sorting, this pattern allows users to manage complex workflows—such as moving tasks from "Backlog" to "Done"—using intuitive, real-time gestures.
Key Features:
Inter-List Transfer: Move elements between different containers with automatic "hand-off" logic.
Intelligent Reflow: Items shift automatically to show landing spots, ensuring the user knows where an item will be dropped.
Touch Optimized: Full support for mobile gestures and touch devices.
Advanced Control: Supports complex rules like one-way lists, cloning, or filtering.
Problem it Solves:Static menus are slow and disconnect users from their data. Shared Lists provide a high-fidelity, direct-manipulation interface that mimics physical movement, reducing cognitive load and increasing task speed.
Maintaining Stable Indexes
To prevent the UI from losing track of items, treat your fetched data as a "read-only" source for the display. Manage all reordering within "fake" or temporary state variables. If the display list is updated mid-drag, the component will refresh, clearing the current SortableJS positions and resulting in an inconsistent UI state.
BSD-3 license (https://opensource.org/licenses/BSD-3-Clause)