SortableJS/Sortable

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.

Star history