RubaXa/Sortable
Sortable
Sortable is a JavaScript drag and drop library used to create reorderable lists of HTML elements. It is a framework-agnostic tool and a touch-enabled interaction library that functions across modern browsers and touch devices without dependencies on specific web frameworks.
The library enables the movement and cloning of elements between different containers using shared group configurations. It supports the repositioning of multiple items simultaneously and the use of specific drag handles to restrict which areas of an element trigger a move.
Additional capabilities include programmatic sorting, the serialization of list orders for state restoration, and the use of animated transitions and placeholders to visualize layout shifts during reordering. Users can also configure drag sensitivity to prevent accidental triggers.
Features
- Drag and Drop Libraries - Provides a framework-agnostic library for implementing drag-and-drop reorderable lists across modern browsers and touch devices.
- List Reordering Components - Provides a comprehensive set of components for creating visually reorderable lists via drag-and-drop.
- Drag Lifecycle Events - Tracks mouse and touch events to manage the lifecycle and positioning of dragged elements.
- Dynamic Content Sequencing - Enables changing the order of visual elements to reflect specific data hierarchies or priorities.
- Framework Agnostic UI Logic - Provides a vanilla JavaScript implementation that works independently of any specific web framework.
- Touch Gesture Libraries - Implements a touch-enabled interaction system that translates raw pointer and touch inputs into drag-and-drop movements.
- Direct DOM Manipulation - Directly modifies the DOM to append and insert elements to reflect new sorting orders.
- Cross-Container Item Transfer - Allows elements to be moved between different containers by matching shared group identifiers.
- Drag Handles - Provides the ability to restrict drag initiation to specific sub-elements designated as handles.
- Cross-List Transfers - Enables the movement or cloning of elements from one list container to another.
- Layout Placeholders - Uses temporary empty elements as placeholders to visually guide the item drop location.
- List Transition Animations - Provides smooth visual transitions and animations when items swap positions in a list.
- Multi-Item Drag Operations - Supports selecting and repositioning several elements simultaneously during a single drag action.
- Multi-List Item Transfer - Facilitates moving or cloning elements between different containers using shared group configurations.
- Programmatic List Sorting - Allows elements to be reordered automatically using a provided list of identifiers.
- JavaScript Libraries - Drag-and-drop library for modern web interfaces.
- UX Libraries - Library for drag-and-drop reordering of elements.
