fix(ui5-dialog): prevent native drag behavior only for header

fixes: #13131

Author: duygu-rmdn

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

@@ -1698,3 +1698,96 @@ describe("Event Registration", () => {
 		});
 	});
 });
+
+describe("Native drag-and-drop in draggable dialogs", () => {
+	it("_handleDragStart should NOT prevent default for content elements", () => {
+		cy.mount(
+			<Dialog id="test-dialog" draggable={true} headerText="Test">
+				<div id="content-item">Content</div>
+			</Dialog>
+		);
+
+		cy.get("#test-dialog").invoke("prop", "open", true);
+		cy.get<Dialog>("#test-dialog").ui5DialogOpened();
+
+		cy.get("#test-dialog").then($dialog => {
+			const dialog = $dialog.get(0) as Dialog;
+			const content = document.getElementById("content-item");
+
+			// Create a mock event
+			let preventDefaultCalled = false;
+			const mockEvent = {
+				target: content,
+				preventDefault: () => { preventDefaultCalled = true; },
+				defaultPrevented: false
+			} as unknown as DragEvent;
+
+			// Call the handler directly
+			dialog._handleDragStart(mockEvent);
+
+			expect(preventDefaultCalled).to.be.false;
+		});
+	});
+
+	it("_handleDragStart should prevent default for header element", () => {
+		cy.mount(
+			<Dialog id="test-dialog" draggable={true} headerText="Test">
+				<div>Content</div>
+			</Dialog>
+		);
+
+		cy.get("#test-dialog").invoke("prop", "open", true);
+		cy.get<Dialog>("#test-dialog").ui5DialogOpened();
+
+		cy.get("#test-dialog")
+			.shadow()
+			.find(".ui5-popup-header-root")
+			.then($header => {
+				const dialog = document.getElementById("test-dialog") as Dialog;
+				const header = $header.get(0) as HTMLElement;
+
+				// Create a mock event
+				let preventDefaultCalled = false;
+				const mockEvent = {
+					target: header,
+					preventDefault: () => { preventDefaultCalled = true; },
+					defaultPrevented: false
+				} as unknown as DragEvent;
+
+				// Call the handler directly
+				dialog._handleDragStart(mockEvent);
+
+				expect(preventDefaultCalled).to.be.true;
+			});
+	});
+
+	it("_handleDragStart should prevent default for custom header slot", () => {
+		cy.mount(
+			<Dialog id="test-dialog" draggable={true}>
+				<div slot="header" id="custom-header">Header</div>
+				<div>Content</div>
+			</Dialog>
+		);
+
+		cy.get("#test-dialog").invoke("prop", "open", true);
+		cy.get<Dialog>("#test-dialog").ui5DialogOpened();
+
+		cy.get("#custom-header").then($header => {
+			const dialog = document.getElementById("test-dialog") as Dialog;
+			const header = $header.get(0) as HTMLElement;
+
+			// Create a mock event
+			let preventDefaultCalled = false;
+			const mockEvent = {
+				target: header,
+				preventDefault: () => { preventDefaultCalled = true; },
+				defaultPrevented: false
+			} as unknown as DragEvent;
+
+			// Call the handler directly
+			dialog._handleDragStart(mockEvent);
+
+			expect(preventDefaultCalled).to.be.true;
+		});
+	});
+});

packages/main/src/Dialog.ts

@@ -669,7 +669,9 @@ class Dialog extends Popup {
 	}
 
 	_handleDragStart(e: DragEvent) {
-		if (this.draggable) {
+		// Only prevent native drag behavior when dragging from the header
+		// This allows native drag-and-drop to work in the dialog content
+		if (this.draggable && e.target instanceof HTMLElement && Dialog._isHeader(e.target)) {
 			e.preventDefault();
 		}
 	}

packages/main/test/pages/Dialog.html

@@ -95,6 +95,9 @@
 		<br>
 		<br>
 		<ui5-button id="open-big-content">Open dialog with big content</ui5-button>
+		<br>
+		<br>
+		<ui5-button id="native-dnd-open">Open draggable dialog with native DnD</ui5-button>
 	</div>
 	<ui5-block-layer></ui5-block-layer>
 
@@ -452,6 +455,16 @@
 		</ui5-dialog>
 	</div>
 
+	<ui5-dialog id="native-dnd-dialog" header-text="Draggable Dialog with Native DnD" draggable>
+		<p>Drag items to drop zone:</p>
+		<div id="dnd-item-1" draggable="true">Item 1</div>
+		<div id="dnd-item-2" draggable="true">Item 2</div>
+		<div id="drop-zone">Drop Zone</div>
+		<div slot="footer" class="dialogFooter">
+			<ui5-button id="native-dnd-close">Close</ui5-button>
+		</div>
+	</ui5-dialog>
+
 	<ui5-popover header-text="My Heading" id="pop" class="dialog8auto" placement="Top">
 		<!-- <div slot="header">
 			Hello World
@@ -1127,6 +1140,25 @@
 		document.getElementById("open-big-content").addEventListener("click", function () {
 			window["dlgBigContent"].open = true;
 		});
+
+		window["native-dnd-open"].addEventListener("click", () => window["native-dnd-dialog"].open = true);
+		window["native-dnd-close"].addEventListener("click", () => window["native-dnd-dialog"].open = false);
+
+		document.getElementById("dnd-item-1").addEventListener("dragstart", (e) => {
+			e.dataTransfer.setData("text", "item-1");
+		});
+
+		document.getElementById("dnd-item-2").addEventListener("dragstart", (e) => {
+			e.dataTransfer.setData("text", "item-2");
+		});
+
+		const dropZone = document.getElementById("drop-zone");
+		dropZone.addEventListener("dragover", (e) => e.preventDefault());
+		dropZone.addEventListener("drop", (e) => {
+			e.preventDefault();
+			const data = e.dataTransfer.getData("text");
+			dropZone.textContent = `Dropped: ${data}`;
+		});
 	</script>
 </body>