SortableJS/Sortable
Sortable
Sortable is a framework-agnostic JavaScript library for creating reorderable lists through drag and drop interactions. It functions as a reorderable list manager that allows users to rearrange DOM elements using pointer interactions on modern browsers and touch devices.
The library enables the transfer or cloning of items between different lists using shared group identifiers. It supports complex organizational structures, including nested reorderable lists for managing hierarchical data across different levels.
Its capabilities cover the animation of element movements and the configuration of drag directions along horizontal or vertical axes. The tool provides controls for interaction filtering through designated drag handles and the ability to select and move multiple items simultaneously.
Users can serialize list orders into arrays of identifiers to persist the sequence of elements across sessions.
Features
- Drag and Drop Libraries - Ships a comprehensive library for implementing drag-and-drop interactions for reorderable lists across modern browsers.
- List Reordering Components - Provides a framework-agnostic system for visually rearranging items within lists or grids via drag-and-drop.
- Cross-Container Item Transfer - Allows moving or cloning items between different list containers using shared group identifiers.
- Drag and Drop Configurations - Specifies whether elements are reordered along a horizontal or vertical axis using a static value or dynamic function.
- Nested Drag Containers - Enables the creation of hierarchical structures by nesting sortable lists within other lists.
- Drag-and-Drop Row Reorderers - Provides UI components that allow users to manually rearrange the sequence of items in a list via drag-and-drop interactions.
- Element Positioning Utilities - Tracks DOM element coordinates in real time to determine movement and swap thresholds.
- Event-Driven State Managers - Manages the internal state of drag phases using event listeners for mouse and touch interactions.
- Multi-List Item Transfer - Supports complex organization by allowing items to be moved between nested list levels.
- List State Persisters - Provides mechanisms to save and restore the sequence of elements to maintain state across sessions.
- List Sequence Serialization - Extracts the current sequence of items into an array of identifiers for saving or processing.
- CSS Transitions - Uses CSS transitions to provide smooth sliding animations when items change positions.
- Custom Drag Behaviors - Allows the implementation of specialized drag behaviors including custom handles and swap-based reordering.
- Draggable Filters - Prevents specific elements within a list from being dragged to allow integrated buttons.
- Draggable Item Filters - Allows specific elements within a sortable list to be prevented from being dragged.
- Ghost Elements - Provides a ghost-element visual proxy to maintain layout stability during item reordering.
- Drag Operation Controls - Provides controls to restrict drag movements to specific vertical or horizontal axes.
- Drag Handles - Supports designating specific DOM elements as drag handles to restrict where interactions start.
- Drag-and-Drop Cloning - Supports cloning items across lists, leaving the original element in its source position.
- Framework Agnostic UI Logic - Provides interface behavior and state management for lists without enforcing a specific rendering framework.
- Interactive UI Components - Implements pointer-based interactions and animations to enhance user interaction with web elements.
- List Transition Animations - Animates the shifting of items within a collection to provide a fluid reordering experience.
- Multi-Item Drag Operations - Enables the selection and simultaneous movement of multiple list items as a single group.
- Swap-Based Reordering - Implements a swap-based interaction model that exchanges positions of two items instead of shifting the list.
- Position Swapping - Exchanges the positions of two specific items without shifting the entire list order.
- Programmatic List Sorting - Provides APIs to programmatically rearrange the sequence of UI elements based on an array of identifiers.
- Selection Groups - Supports the selection and movement of multiple list items simultaneously as a single group.
- Drag and Drop - Drag-and-drop list reordering library.
