What is the UmbSorterController in Umbraco?

The UmbSorterController is a specialized controller in the Umbraco backoffice that handles the logic and state for drag-and-drop interactions within UI components.

Does this support nested or hierarchical items?

Yes, the skill includes specific patterns for recursive sorting where items can contain their own child containers.

Can I move items between two different lists?

Yes, by sharing a common identifier across multiple UmbSorterController instances, the system allows items to be dragged and dropped between different containers.

How do I handle updates after an item is reordered?

The controller provides an onChange callback that returns the updated model, allowing you to update your component's state or trigger an API request.

Is this compatible with modern Umbraco versions?

This skill is designed for the modern, Lit-based Umbraco backoffice (v14+), utilizing the latest extension and element patterns.

Umbraco Sorter

Name: Umbraco Sorter
Author: umbraco

byumbraco

•

Content Management

Implements drag-and-drop sorting functionality for Umbraco backoffice lists using the UmbSorterController.

About

The Umbraco Sorter skill provides specialized guidance for implementing intuitive drag-and-drop reordering within the Umbraco backoffice UI. By leveraging the UmbSorterController, developers can easily manage item reordering within a single list, facilitate moving items between multiple containers, and handle complex nested sorting scenarios like hierarchical block editors. This skill ensures that UI implementations follow Umbraco's best practices for state management and DOM manipulation using Lit-based elements.

Key Features

Automatic CSS class application for visual dragging feedback
1 GitHub stars
Support for complex nested and recursive sorting structures
Single and multi-container drag-and-drop reordering
Synchronization with Umbraco state management patterns
Customizable item and container CSS selectors

Use Cases

Creating dashboards with items that can be moved between columns
Developing hierarchical tree views with nested child sorting
Building custom block editors with reorderable content elements

About

Key Features

Automatic CSS class application for visual dragging feedback
1 GitHub stars
Support for complex nested and recursive sorting structures
Single and multi-container drag-and-drop reordering
Synchronization with Umbraco state management patterns
Customizable item and container CSS selectors

Use Cases

Creating dashboards with items that can be moved between columns
Developing hierarchical tree views with nested child sorting
Building custom block editors with reorderable content elements