diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 98ba6f55ce3f..02e6a997177a 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -707,7 +707,9 @@ class Dialog extends Popup { } _handleDragStart(e: DragEvent) { - if (this.draggable) { + // Only prevent native drag behavior when dragging from the header + // to allow native drag-and-drop functionality in the dialog content. + if (this.draggable && e.target instanceof HTMLElement && Dialog._isHeader(e.target)) { e.preventDefault(); } } diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html index 5fcfced3f48a..c13d80319f16 100644 --- a/packages/main/test/pages/Dialog.html +++ b/packages/main/test/pages/Dialog.html @@ -72,8 +72,22 @@
Open dialog calling show() multiple times +
+
+ Open draggable dialog with native DnD + + +

Drag items to drop zone:

+
Item 1
+
Item 2
+
Drop Zone
+
+ Close +
+
+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. That´s OpenUI5.

@@ -805,6 +819,25 @@ window["dialogFocus1"].close(); }); + 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}`; + }); +