fix(DnD): fix drag and drop in Shadow DOM

packages/base/src/util/dragAndDrop/DragRegistry.ts

@@ -1,4 +1,3 @@
-import type UI5Element from "../../UI5Element.js";
 import type MovePlacement from "../../types/MovePlacement.js";
 import MultipleDragGhostCss from "../../generated/css/MultipleDragGhost.css.js";
 
@@ -10,55 +9,16 @@ import {
 
 const MIN_MULTI_DRAG_COUNT = 2;
 
-let customDragElementPromise: Promise<HTMLElement> | null = null;
 let draggedElement: HTMLElement | null = null;
-let globalHandlersAttached = false;
-const subscribers = new Set<UI5Element>();
-const selfManagedDragAreas = new Set<HTMLElement | ShadowRoot>();
 
-const ondragstart = (e: DragEvent) => {
-	if (!e.dataTransfer || !(e.target instanceof HTMLElement)) {
-		return;
-	}
-
-	if (!selfManagedDragAreas.has(e.target)) {
-		draggedElement = e.target;
-	}
-
-	handleMultipleDrag(e);
-};
-
-const handleMultipleDrag = async (e: DragEvent) => {
-	if (!customDragElementPromise || !e.dataTransfer) {
-		return;
-	}
-	const dragElement = await customDragElementPromise;
-	// Add to document body temporarily
-	document.body.appendChild(dragElement);
-
-	e.dataTransfer.setDragImage(dragElement, 0, 0);
-
-	// Clean up the temporary element after the drag operation starts
-	requestAnimationFrame(() => {
-		dragElement.remove();
-	});
-};
-
-const ondragend = () => {
-	draggedElement = null;
-	customDragElementPromise = null;
+const setDraggedElement = (element: HTMLElement | null) => {
+	draggedElement = element;
 };
 
-const ondrop = () => {
+const clearDraggedElement = () => {
 	draggedElement = null;
-	customDragElementPromise = null;
 };
 
-const setDraggedElement = (element: HTMLElement | null) => {
-	draggedElement = element;
-};
-type SetDraggedElementFunction = typeof setDraggedElement;
-
 const getDraggedElement = () => {
 	return draggedElement;
 };
@@ -86,58 +46,27 @@ const createDefaultMultiDragElement = async (count: number): Promise<HTMLElement
  * @param {DragEvent} e - The drag event that triggered the operation.
  * @public
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const startMultipleDrag = (count: number, e: DragEvent): void => {
+const startMultipleDrag = async (count: number, e: DragEvent) => {
 	if (count < MIN_MULTI_DRAG_COUNT) {
 		console.warn(`Cannot start multiple drag with count ${count}. Minimum is ${MIN_MULTI_DRAG_COUNT}.`); // eslint-disable-line
 		return;
 	}
 
-	customDragElementPromise = createDefaultMultiDragElement(count);
-};
-
-const attachGlobalHandlers = () => {
-	if (globalHandlersAttached) {
+	if (!e.dataTransfer) {
 		return;
 	}
 
-	document.body.addEventListener("dragstart", ondragstart);
-	document.body.addEventListener("dragend", ondragend);
-	document.body.addEventListener("drop", ondrop);
-	globalHandlersAttached = true;
-};
-
-const detachGlobalHandlers = () => {
-	document.body.removeEventListener("dragstart", ondragstart);
-	document.body.removeEventListener("dragend", ondragend);
-	document.body.removeEventListener("drop", ondrop);
-	globalHandlersAttached = false;
-};
-
-const subscribe = (subscriber: UI5Element) => {
-	subscribers.add(subscriber);
-
-	if (!globalHandlersAttached) {
-		attachGlobalHandlers();
-	}
-};
+	const customDragElement = await createDefaultMultiDragElement(count);
 
-const unsubscribe = (subscriber: UI5Element) => {
-	subscribers.delete(subscriber);
-
-	if (subscribers.size === 0 && globalHandlersAttached) {
-		detachGlobalHandlers();
-	}
-};
-
-const addSelfManagedArea = (area: HTMLElement | ShadowRoot) => {
-	selfManagedDragAreas.add(area);
+	// Add to document body temporarily
+	document.body.appendChild(customDragElement);
 
-	return setDraggedElement;
-};
+	e.dataTransfer.setDragImage(customDragElement, 0, 0);
 
-const removeSelfManagedArea = (area: HTMLElement | ShadowRoot) => {
-	selfManagedDragAreas.delete(area);
+	// Clean up the temporary element after the drag operation starts
+	requestAnimationFrame(() => {
+		customDragElement.remove();
+	});
 };
 
 type DragAndDropSettings = {
@@ -163,10 +92,8 @@ type MoveEventDetail = {
 };
 
 const DragRegistry = {
-	subscribe,
-	unsubscribe,
-	addSelfManagedArea,
-	removeSelfManagedArea,
+	setDraggedElement,
+	clearDraggedElement,
 	getDraggedElement,
 	startMultipleDrag,
 };
@@ -175,8 +102,8 @@ export default DragRegistry;
 export {
 	startMultipleDrag,
 };
+
 export type {
-	SetDraggedElementFunction,
 	DragAndDropSettings,
 	MoveEventDetail,
 };

packages/main/cypress/specs/List.cy.tsx

@@ -1777,7 +1777,6 @@ describe("List - Drag and Drop", () => {
 			<div>
 				<CheckBox text="Movable items" checked />
 				<CheckBox text="Compact density" />
-				<a href="http://sap.com" draggable={true}>http://sap.com</a>
 
 				<section>
 					<h2>Drag and drop</h2>
@@ -1981,38 +1980,6 @@ describe("List - Drag and Drop", () => {
 		cy.get("[ui5-list]").first().find("[ui5-li]").should("have.length.at.least", 3);
 		cy.get("[ui5-list]").eq(1).find("[ui5-li]").should("have.length.at.least", 2);
 	});
-
-	it("Moving link to list that doesn't accept it", () => {
-		const dataTransfer = new DataTransfer();
-
-		cy.get("a[href='http://sap.com']")
-			.trigger("dragstart", { dataTransfer });
-
-		cy.get("[ui5-list]").first().find("[ui5-li]").first()
-			.trigger("dragover", { dataTransfer })
-			.trigger("drop", { dataTransfer });
-
-		cy.get("a[href='http://sap.com']")
-			.trigger("dragend", { dataTransfer });
-
-		cy.get("[ui5-list]").first().find("[ui5-li]").should("have.length", 3);
-	});
-
-	it("Moving link to list that accepts it", () => {
-		const dataTransfer = new DataTransfer();
-
-		cy.get("a[href='http://sap.com']")
-			.trigger("dragstart", { dataTransfer });
-
-		cy.get("[ui5-list]").eq(1).find("[ui5-li]").eq(1)
-			.trigger("dragover", { dataTransfer })
-			.trigger("drop", { dataTransfer });
-
-		cy.get("a[href='http://sap.com']")
-			.trigger("dragend", { dataTransfer });
-
-		cy.get("[ui5-list]").eq(1).find("[ui5-li]").should("have.length.at.least", 3);
-	});
 });
 
 describe("List keyboard drag and drop tests", () => {

packages/main/cypress/specs/ListItemGroup.cy.tsx

@@ -7,7 +7,7 @@ describe("ListItemGroup Tests", () => {
 		cy.mount(<ListItemGroup headerText="New Items" />);
 
 		cy.get("[ui5-li-group]").should("exist");
-		
+
 		cy.get("[ui5-li-group]")
 			.shadow()
 			.find("ui5-li-group-header")
@@ -95,7 +95,7 @@ describe("List drag and drop tests", () => {
 						destination: { element: $target[0], placement }
 					}
 				});
-				
+
 				const listElement = $target[0].closest("[ui5-li-group]");
 				if (listElement) {
 					listElement.dispatchEvent(moveEvent);
@@ -248,68 +248,6 @@ describe("List drag and drop tests", () => {
 		cy.get("@list1").find("ui5-li").should("have.length", 4);
 		cy.get("@list2").find("ui5-li").should("have.length", 2);
 	});
-
-	it("Moving link to list that doesn't accept it", () => {
-		cy.mount(
-			<div>
-				<a draggable={true} style={{ display: "block", marginBottom: "10px" }}>
-					http://sap.com
-				</a>
-				<ListItemGroup headerText="List 1" />
-			</div>
-		);
-
-		cy.get("[ui5-li-group]").eq(0).as("list1").should("exist");
-		setupDragAndDrop("@list1", false);
-
-		cy.get("@list1").then($list => {
-			$list[0].innerHTML = `
-				<ui5-li movable>1. Bulgaria</ui5-li>
-				<ui5-li movable>1. Germany</ui5-li>
-				<ui5-li movable>1. Spain</ui5-li>
-			`;
-		});
-
-		cy.get("@list1").find("ui5-li").should("have.length", 3);
-		cy.get("a").as("link").should("contain.text", "http://sap.com");
-		cy.get("@list1").find("ui5-li").eq(0).as("first").should("contain.text", "1. Bulgaria");
-
-		dispatchMoveEvent("@link", "@first", "After");
-
-		cy.get("@list1").find("ui5-li").should("have.length", 3);
-		cy.get("a").should("exist").and("contain.text", "http://sap.com");
-	});
-
-	it("Moving link to list that accepts it", () => {
-		cy.mount(
-			<div>
-				<a draggable={true} style={{ display: "block", marginBottom: "10px" }}>
-					http://sap.com
-				</a>
-				<ListItemGroup headerText="List 2" />
-			</div>
-		);
-
-		cy.get("[ui5-li-group]").eq(0).as("list2").should("exist");
-		setupDragAndDrop("@list2", true);
-
-		cy.get("@list2").then($list => {
-			$list[0].innerHTML = `
-				<ui5-li movable>2. Bulgaria</ui5-li>
-				<ui5-li movable data-allows-nesting>2. Germany (Allows nesting)</ui5-li>
-				<ui5-li movable>2. Spain</ui5-li>
-			`;
-		});
-
-		cy.get("@list2").find("ui5-li").should("have.length", 3);
-		cy.get("a").as("link").should("contain.text", "http://sap.com");
-		cy.get("@list2").find("ui5-li").eq(1).as("second").should("contain.text", "2. Germany (Allows nesting)");
-
-		dispatchMoveEvent("@link", "@second", "Before");
-
-		cy.get("@list2").children().should("have.length", 4);
-		cy.get("@list2").find("a").should("exist").and("contain.text", "http://sap.com");
-	});
 });
 
 describe("Focus", () => {