diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
index 04d64ee479..1db8013490 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
@@ -74,7 +74,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
${repeat(
this._items,
- (item) => item.name,
+ (item) => item,
(item) =>
html`
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts
index d9d9c81aa7..2f22b1c4c4 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-item.ts
@@ -14,6 +14,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
render() {
return html`
${this.name}
+
`;
}
@@ -30,7 +31,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
border-radius: var(--uui-border-radius);
margin-bottom: 3px;
}
- :host[drag-placeholder] {
+ :host([drag-placeholder]) {
opacity: 0.2;
}
`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
index 5fcc94a136..50ae7b19ee 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
@@ -147,7 +147,9 @@ export class UmbSorterController implements UmbController {
// Set defaults:
config.ignorerSelector ??= 'a, img, iframe';
- config.placeholderAttr ??= 'drag-placeholder';
+ if (!config.placeholderClass && !config.placeholderAttr) {
+ config.placeholderAttr = 'drag-placeholder';
+ }
this.#config = config as INTERNAL_UmbSorterConfig;
host.addController(this);