skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-sorter

Implement drag-and-drop sorting for Umbraco backoffice lists with UmbSorterController.

4|Updated Mar 6, 2026
Search Tags:#controller#sorting#drag-and-drop#umbraco#lit#backoffice ui
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-sorter-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-sorter
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/extensions/umbraco-sorter
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-sorter-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers implement reliable drag-and-drop reordering in the Umbraco backoffice UI so users can reorder lists and nested items without manual code-heavy wiring.

Core Features & Use Cases

  • Drag-and-drop list ordering: Reorder items within a single container using UmbSorterController and consistent item identity.
  • Cross-container moving: Move items between two or more connected sorters by sharing the same sorter identifier.
  • Nested sorting: Support items that contain child items by recursively wiring sorters and propagating updated models upward.
  • Use cases: Block editor ordering, content tree-like UI, and any backoffice component requiring user-driven ordering with minimal UI churn.

Quick Start

Ask the AI to generate a complete UmbSorterController-based Lit component for a sortable list, including a container element, sortable item element, and onChange model updates, using your item identity fields and CSS selectors.

Frequently Asked Questions about umbraco-sorter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement drag-and-drop sorting in the Umbraco backoffice?▼

You can implement drag-and-drop sorting in Umbraco by wiring UmbSorterController to a Lit component, using getUniqueOfElement and getUniqueOfModel for identity, and updating state via onChange callbacks.

Can I move items between multiple containers with Umbraco drag-and-drop?▼

Yes, moving items between multiple containers requires sharing a sorter identifier across connected sorters, enabling cross-container dragging based on a shared identifier.

How does recursive nested sorting work for tree-like data structures in Umbraco?▼

Recursive nested sorting for tree-like structures requires recursively wiring sorters to child items and propagating updated models upward to the host component via onChange callbacks.

What do I need to configure for UmbSorterController to work correctly?▼

You must configure correct DOM and model uniqueness via getUniqueOfElement and getUniqueOfModel, appropriate itemSelector and containerSelector wiring, and onChange callbacks for state propagation.

Does drag-and-drop sorting in Umbraco work with Lit-based backoffice components?▼

Yes, drag-and-drop sorting in Umbraco is designed for Lit-based backoffice components, generating a complete sortable list component with UmbSorterController, container elements, and onChange updates.

What are the limitations of using UmbSorterController for Umbraco backoffice lists?▼

Using UmbSorterController requires correct DOM and model uniqueness, shared identifiers for cross-container dragging, and appropriate itemSelector and containerSelector wiring for single, cross-container, and nested sorting.

Related Skills

Explore More Software Engineering Skills→
umbracoumbraco
26

umbraco-sorter

Implement drag-and-drop sorting in the Umbraco backoffice with UmbSorterController.

Official
Intermediate
1k-off1k-off
1

umbraco-sorter

Enables drag-and-drop sorting in the web-based Umbraco backoffice via the UmbSorterController.

Community
Intermediate
albanistalbanist
4

umbraco-umbraco-element

Create Umbraco backoffice web components using UmbElementMixin and UmbLitElement.

Community
Intermediate
Arnutt-NArnutt-N

drag-drop

Implement drag-and-drop hooks and UI components for sortable lists, Kanban boards, and file drop zones.

Community
Advanced