# Umbraco 分拣机 ## 这是什么？ UmbSorterController 为 Umbraco 后台的项目列表提供拖放排序功能。它处理容器内的项目重新排序、容器之间的移动项目，并支持嵌套排序方案。这对于块编辑器、内容树和任何需要用户驱动排序的 UI 非常有用。 ## 文档在实施之前始终获取最新文档： * **基础** ： * **扩展注册表**： ## 参考示例 Umbraco 源代码包括工作示例： **嵌套容器**：`/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/` 此示例演示了对可包含子项目的项目进行嵌套排序。 **两个容器** ：`/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/` 此示例显示在两个单独的容器之间移动项目。 ## 相关基础技能 * **状态管理**：用于订单更改时的反应式更新 * 参考技能：`umbraco-state-management` * **Umbraco Element** ：用于创建可排序的项目元素 * 参考技能：`umbraco-umbraco-element` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 单个容器还是多个容器？嵌套项目？什么数据模型？ 3. **生成文件** \- 创建容器元素+项目元素+排序器设置 4. **解释** \- 显示创建的内容以及排序的工作原理 ** ** ## 基本分拣机设置从'@umbraco-cms/backoffice/sorter'导入{UmbSorterController}；从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement, property, Repeat }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；接口我的项目{ id：字符串；名称：字符串； } @customElement('我的可排序列表') 导出类 MySortableListElement 扩展 UmbLitElement { #sorter = new UmbSorterController(this, { // 从 DOM 元素获取唯一标识符 getUniqueOfElement: (元素) => { 返回 element.getAttribute('data-id') ?? ''; }, // 从数据模型中获取唯一标识符 getUniqueOfModel: (modelEntry) => { 返回 modelEntry.id； }, // 所有连接的排序器共享的标识符（用于跨容器拖动）标识符：'我的可排序列表'， // 可排序项目的 CSS 选择器 itemSelector: '.sortable-item', // 容器的 CSS 选择器容器选择器：'.sortable-container'， // 当订单改变时调用 onChange: ({ 模型 }) => { this._items = 模型； this.requestUpdate(); this.dispatchEvent(new CustomEvent('change', { 详细信息: { items: model } })); }, }); @property({ 类型: 数组, 属性: false }) 公共获取项目（）：MyItem [] { 返回这个._items； } 公共设置项目（值：MyItem []）{ this._items = 值； this.#sorter.setModel(value); this.requestUpdate(); } 私有_items: MyItem[] = []; 覆盖渲染（）{ 返回 html`

${重复( 这个._项目， (项目) => 项目.id, （项目）=> html`

${项目.名称}

` )}

`; } } ** ** ## 嵌套排序器（带有子项的项目）从'@umbraco-cms/backoffice/sorter'导入{UmbSorterController}；从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement, property, Repeat, css }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；导出接口 NestedItem { 名称：字符串；孩子？：NestedItem[]； } @customElement('我的排序器组') 导出类 MySorterGroupElement 扩展 UmbLitElement { #sorter = new UmbSorterController(this, { getUniqueOfElement: (element) => element.name, getUniqueOfModel: (modelEntry) => modelEntry.name, // 重要提示：相同的标识符允许项目在所有嵌套组之间移动标识符：'我的嵌套排序器'， itemSelector: '我的排序器项目', 容器选择器：'.sorter-container'， onChange: ({ 模型 }) => { const oldValue = this._value; this._value = 模型； this.requestUpdate('value', oldValue); this.dispatchEvent(new CustomEvent('change')); }, }); @property({ 类型: 数组, 属性: false }) 公共获取值（）：NestedItem [] { 返回 this._value ?? []； } 公共设置值（值：NestedItem[]）{ this._value = 值； this.#sorter.setModel(value); this.requestUpdate(); } 私有_值？：NestedItem[]；覆盖渲染（）{ 返回 html`

${重复( 这个值， (项目) => 项目.名称, （项目）=> html` <我的排序器组 .value=${item.children ?? []} @change=${(e: 事件) => { item.children = (e.target as MySorterGroupElement).value; }} > ` )}

`; } 静态覆盖样式= css` ：主机{ 显示：块；最小高度：20px；边框: 1px 虚线 rgba(122, 122, 122, 0.25); 边框半径：var(--uui-border-radius); 填充：var(--uui-size-space-1); } `; } ** ** ## 可排序项目元素从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement, property, css }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }； @customElement('我的排序器项目') 导出类 MySorterItemElement 扩展 UmbLitElement { @property({ 类型：字符串 }) 名称=''；覆盖渲染（）{ 返回 html`

${this.name} <插槽名称=“动作”>

<槽>

`; } 静态覆盖样式= css` ：主机{ 显示：块；背景：var(--uui-color-surface); 边框：1px 实心 var(--uui-color-border); 边框半径：var(--uui-border-radius); 边距：var(--uui-size-space-1) 0; } .item-wrapper { 填充：var(--uui-size-space-3); } .drag-handle { 光标：抓取；显示：内联块；右边距：var(--uui-size-space-2); } .drag-handle:活动{ 光标：抓取； } .孩子们{ 左边距：var(--uui-size-space-5); 顶部边距：var(--uui-size-space-2); } `; } 声明全局{ 接口 HTMLElementTagNameMap { '我的排序项'：MySorterItemElement； } } ** ** ## 两个容器（跨容器排序） @customElement('我的双排序器仪表板') 导出类 MyDualSorterDashboard 扩展 UmbLitElement { listOneItems: MyItem[] = [ { id: '1', 名称: '苹果' }, { id: '2', 名称: '香蕉' }, ]; listTwoItems: MyItem[] = [ { id: '3', name: '胡萝卜' }, { id: '4', 名称: '日期' }, ]; 覆盖渲染（）{ 返回 html`

<我的可排序列表 .items=${this.listOneItems} @change=${(e: CustomEvent) => { this.listOneItems = e.detail.items; }} > <我的可排序列表 .items=${this.listTwoItems} @change=${(e: CustomEvent) => { this.listTwoItems = e.detail.items; }} >

`; } } **Key** ：两个列表在其 UmbSorterController 中使用相同的“标识符”来启用它们之间的拖动。 ** ** ## UmbSorterController 选项选项 |类型 |描述 ---|---|--- `标识符` | `字符串` |连接的排序器的共享 ID（启用跨容器拖动） `项目选择器` | `字符串` |可排序项目的 CSS 选择器 `容器选择器` | `字符串` |容器的 CSS 选择器 `getUniqueOfElement` | `（元素）=> 字符串` |从 DOM 元素中提取唯一 ID `getUniqueOfModel` | `（模型）=> 字符串` |从数据模型中提取唯一ID `onChange` | `({ model }) => void` |订单更改时调用 `onStart` | `() => 无效` |拖动开始时调用 `onEnd` | `() => 无效` |拖动结束时调用 ** ** ## 关键方法 // 设置模型（当项目外部发生变化时调用） this.#sorter.setModel(items); // 获取当前模型 const currentItems = this.#sorter.getModel(); // 暂时禁用排序 this.#sorter.disable(); // 重新启用排序 this.#sorter.enable(); ** ** ## 拖动过程中应用的 CSS 类班级 |适用于 |当 ---|---|--- `.umb-sorter-拖动` |集装箱|当任何项目被拖动时 `.umb-sorter-占位符` |占位符元素 |指示下降位置 ** ** ## 最佳实践 1. **使用唯一标识符** \- 每个项目必须有一个唯一的ID 2. **仔细匹配选择器** \- `itemSelector` 和 `containerSelector` 必须与您的 DOM 匹配 3. **共享标识符** \- 对连接的排序器使用相同的“标识符” 4. **处理嵌套更新** \- 通过嵌套结构向上传播更改 5. **使用重复指令** \- 始终使用 `repeat()` 和关键函数来进行正确的 DOM 比较 6. **提供视觉反馈** \- 清晰地设置拖动手柄和放置区域的样式就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

乌布拉科排序

包含技能