test material

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts

@@ -74,7 +74,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			<div class="sorter-container">
 				${repeat(
 					this._items,
-					(item) => item.name,
+					(item) => item,
 					(item) =>
 						html`<example-sorter-item name=${item.name}>
 							<button @click=${() => this.removeItem(item)}>Delete</button>

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}
+			<img src="https://picsum.photos/seed/${this.name}/5000/5000" style="width:250px;" />
 			<slot></slot>
 		`;
 	}
@@ -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;
 			}
 		`,

src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts

@@ -147,7 +147,9 @@ export class UmbSorterController<T extends object> 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<T>;
 		host.addController(this);