From 126166d77aadb2234076f675c301a3b4aab165b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Sat, 24 Feb 2024 21:51:24 +0100
Subject: [PATCH] improve draggableSelector

---
 .../packages/core/sorter/sorter.controller.ts   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

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 452170dcb6..ea693c4a95 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
@@ -333,9 +333,12 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 
 		if (!this.#config.disabledItemSelector || !element.matches(this.#config.disabledItemSelector)) {
 			// Idea: to make sure on does not get initialized twice: if ((element as HTMLElement).draggable === true) return;
-			(element as HTMLElement).draggable = true;
-			element.addEventListener('dragstart', this.#handleDragStart);
-			element.addEventListener('dragend', this.#handleDragEnd);
+			const draggableElement = this.#config.draggableSelector
+				? (element.querySelector(this.#config.draggableSelector) as HTMLElement | undefined) ?? element
+				: element;
+			(draggableElement as HTMLElement).draggable = true;
+			draggableElement.addEventListener('dragstart', this.#handleDragStart);
+			draggableElement.addEventListener('dragend', this.#handleDragEnd);
 		}
 
 		// If we have a currentItem and the element matches, we should set the currentElement to this element.
@@ -354,10 +357,12 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 			destroyIgnorerElements(element, this.#config.ignorerSelector);
 		}
 
-		element.removeEventListener('dragstart', this.#handleDragStart);
+		const draggableElement = this.#config.draggableSelector
+			? (element.querySelector(this.#config.draggableSelector) as HTMLElement | undefined) ?? element
+			: element;
+		draggableElement.removeEventListener('dragstart', this.#handleDragStart);
 		// We are not ready to remove the dragend or drop, as this is might be the active one just moving container:
-		//element.removeEventListener('dragend', this.#handleDragEnd);
-		//element.addEventListener('drop', this.#handleDrop);
+		//draggableElement.removeEventListener('dragend', this.#handleDragEnd);
 	}
 
 	#setupPlaceholderStyle() {