skills.rest
umbraco
umbracoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-sorter

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

26|13|Updated Nov 30, 2025
Search Tags:#ui component#drag and drop#sorting#umbraco#backoffice#list management
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-sorter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-sorter
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-sorter
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-sorter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the implementation of drag-and-drop sorting functionality within the Umbraco backoffice, enabling users to intuitively reorder lists and nested items.

Core Features & Use Cases

  • Drag-and-Drop Sorting: Allows users to reorder items within a single container.
  • Cross-Container Dragging: Enables moving items between different sortable containers.
  • Nested Sorting: Supports hierarchical sorting where items can contain child items.
  • Use Case: Implement a block editor where users can drag and drop content blocks to reorder them, or a product catalog where administrators can sort categories and subcategories.

Quick Start

Use the umbraco-sorter skill to create a basic sortable list component in the Umbraco backoffice.

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?▼

Drag-and-drop sorting in the Umbraco backoffice is implemented using the UmbSorterController, which supports reordering items within single or nested containers and moving items across different sortable containers.

What is nested sorting and how does it work for hierarchical lists?▼

Nested sorting allows users to drag and drop hierarchical items containing child elements, enabling intuitive reordering of categories and subcategories within the Umbraco backoffice environment.

Can I move items between different sortable containers in Umbraco?▼

Cross-container dragging is supported, allowing users to move items between different sortable containers in the Umbraco backoffice using the UmbSorterController integration.

Do I need LitElement to build sortable UI components in Umbraco?▼

Yes, LitElement is required for building the UI components of the sortable functionality, alongside Umbraco's backoffice external modules for proper controller integration.

What's the best way to manage list reordering for content blocks in Umbraco?▼

Using the UmbSorterController provides a structured approach to list management, enabling administrators to drag and drop content blocks to reorder them intuitively within the backoffice.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-example-generator

Generate and run Umbraco backoffice extensions with Vite and LitElement.

Official
Intermediate
albanistalbanist
4

umbraco-sorter

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

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-block-editor-custom-view

Implements custom web component views for Umbraco block editor content types.

Official
Intermediate
wodsmithwodsmith
2

drag-and-drop

Implement drag-and-drop interactions for sortable lists and kanban boards.

Official
Advanced