umbraco-sorter

To add drag-and-drop sorting in Umbraco, configure the UmbSorterController with item and container selectors, stable unique IDs, and onChange handlers to emit updated models for persistence. This synchronizes UI reorder actions with the underlying data state.

Cross-container dragging in Umbraco is supported by sharing a controller identifier across multiple lists. This allows items to move between different containers while maintaining a consistent model state for the entire dashboard view.

Nested sorting in Umbraco allows parent items to contain child sortable groups using UmbSorterController. This enables tree-like ordering for complex backoffice editors, ensuring parent and child elements are reorganized predictably.

To keep UI state synchronized when reordering Umbraco items, you need stable unique IDs for each item and properly configured onChange handlers within the UmbSorterController to emit updated models for persistence.

Umbraco drag-and-drop sorting using UmbSorterController works with Lit and TypeScript to manage UI state. It applies to sortable list UI patterns such as block editors, nested container editors, and cross-container dashboards requiring user-driven ordering.