fix(framework): set dataTransfer.effectAllowed only for UI5 elements (#…

…9150) fix(framework): set dataTransfer.effectAllowed only for UI5 elements (#9136) Fixes: #9131
SAP · Jun 8, 2024 · b03f70c · b03f70c
1 parent f899378
commit b03f70c
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 3 deletions.
diff --git a/packages/base/src/util/dragAndDrop/DragRegistry.ts b/packages/base/src/util/dragAndDrop/DragRegistry.ts
@@ -10,9 +10,6 @@ const ondragstart = (e: DragEvent) => {
 		return;
 	}
 
-	e.dataTransfer.dropEffect = "move";
-	e.dataTransfer.effectAllowed = "move";
-
 	if (!selfManagedDragAreas.has(e.target)) {
 		draggedElement = e.target;
 	}

diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts
@@ -351,8 +351,14 @@ abstract class ListItem extends ListItemBase {
 	}
 
 	_ondragstart(e: DragEvent) {
+		if (!e.dataTransfer) {
+			return;
+		}
+
 		if (e.target === this._listItem) {
 			this.setAttribute("data-moving", "");
+			e.dataTransfer.dropEffect = "move";
+			e.dataTransfer.effectAllowed = "move";
 		}
 	}
 

diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
@@ -502,6 +502,9 @@ class TabContainer extends UI5Element {
 			return;
 		}
 
+		e.dataTransfer.dropEffect = "move";
+		e.dataTransfer.effectAllowed = "move";
+
 		this._setDraggedElement!((e.target as Tab).realTabReference);
 	}
 

diff --git a/packages/main/test/pages/DragAndDropGeneric.html b/packages/main/test/pages/DragAndDropGeneric.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Generic Drag and Drop Tests</title>
+
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="./styles/DragAndDropGeneric.css">
+</head>
+
+<body class="tree1auto">
+	<section>
+		<h2>Events</h2>
+		<div class="events">
+			<div>
+				<h3>requested effects</h3>
+				<div>
+					<span class="label">dropEffect: </span><span id="reqDropEffect"></span>
+				</div>
+				<div>
+					<span class="label">effectAllowed: </span><span id="reqEffectAllowed"></span>
+				</div>
+			</div>
+			<div>
+				<h3>dragstart</h3>
+				<div>
+					<span class="label">dropEffect: </span><span id="dragstartDropEffect"></span>
+				</div>
+				<div>
+					<span class="label">effectAllowed: </span><span id="dragstartEffectAllowed"></span>
+				</div>
+			</div>
+			<div>
+				<h3>dragenter</h3>
+				<div>
+					<span class="label">dropEffect: </span><span id="dragenterDropEffect"></span>
+				</div>
+				<div>
+					<span class="label">effectAllowed: </span><span id="dragenterEffectAllowed"></span>
+				</div>
+			</div>
+			<div>
+				<h3>dragover</h3>
+				<div>
+					<span class="label">dropEffect: </span><span id="dragoverDropEffect"></span>
+				</div>
+				<div>
+					<span class="label">effectAllowed: </span><span id="dragoverEffectAllowed"></span>
+				</div>
+			</div>
+			<div>
+				<h3>dragend</h3>
+				<div>
+					<span class="label">dropEffect: </span><span id="dragendDropEffect"></span>
+				</div>
+				<div>
+					<span class="label">effectAllowed: </span><span id="dragendEffectAllowed"></span>
+				</div>
+			</div>
+			<div>
+				<h3>drop</h3>
+				<div>
+					<span class="label">dropEffect: </span><span id="dropDropEffect"></span>
+				</div>
+				<div>
+					<span class="label">effectAllowed: </span><span id="dropEffectAllowed"></span>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section>
+		<h2>Native Draggable Elements with Different Effects</h2>
+		<div id="nativeElemsCont"></div>
+	</section>
+
+
+	<section>
+		<h2>UI5 Movable (Draggable) Elements</h2>
+		<h2>List</h2>
+		<ui5-list id="list">
+			<ui5-li movable>Item 1</ui5-li>
+			<ui5-li movable>Item 2</ui5-li>
+			<ui5-li movable>Item 3</ui5-li>
+		</ui5-list>
+		<h3>Tree</h3>
+		<ui5-tree id="tree">
+			<ui5-tree-item movable expanded text="Tree 1" icon="paste">
+				<ui5-title slot="content" expanded> 
+					<ui5-label>Tree 1</ui5-label>
+					<ui5-label>Tree 1</ui5-label>
+				</ui5-title>
+				<ui5-tree-item movable text="Tree 1.1.1"></ui5-tree-item>
+				<ui5-tree-item movable text="Tree 1.1.2"></ui5-tree-item>
+			<ui5-tree-item movable text="Tree 3">
+			</ui5-tree-item>
+		</ui5-tree>
+		<h3>TabContainer</h3>
+		<ui5-tabcontainer id="tabContainer" collapsed overflow-mode="StartAndEnd">
+			<ui5-tab movable text="One"></ui5-tab>
+			<ui5-tab movable text="Two"></ui5-tab>
+			<ui5-tab movable text="Three">
+				<ui5-tab slot="items" movable text="3.1"></ui5-tab>
+			</ui5-tab>
+		</ui5-tabcontainer>
+	</section>
+
+	<script>
+		const events = ["dragstart", "dragenter", "dragover", "dragend", "drop"];
+
+		function logDragEvent(evType) {
+			return (e) => {
+				document.getElementById(`${evType}DropEffect`).textContent = e.dataTransfer.dropEffect;
+				document.getElementById(`${evType}EffectAllowed`).textContent = e.dataTransfer.effectAllowed;
+			};
+		}
+
+		function resetLogs() {
+			events.forEach((evType) => {
+				document.getElementById(`${evType}DropEffect`).textContent = "";
+				document.getElementById(`${evType}EffectAllowed`).textContent = "";
+			});
+		}
+
+		events.forEach((evType) => {
+			document.documentElement.addEventListener(evType, logDragEvent(evType));
+		});
+
+		const nativeElementCont = document.getElementById("nativeElemsCont");
+
+		["none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", "uninitialized"].forEach((effectAllowed) => {
+			const label = document.createElement("span");
+			label.textContent = `${effectAllowed}: `;
+			label.classList.add("label");
+			const link = document.createElement("a");
+			link.href = "http://sap.com";
+			link.textContent = "drag me";
+			const wrapper = document.createElement("div");
+			wrapper.appendChild(label);
+			wrapper.appendChild(link);
+
+			nativeElementCont.appendChild(wrapper)
+
+			link.addEventListener("dragstart", (e) => {
+				resetLogs();
+
+				e.dataTransfer.effectAllowed = effectAllowed;
+				document.getElementById("reqDropEffect").textContent = e.dataTransfer.dropEffect;
+				document.getElementById("reqEffectAllowed").textContent = e.dataTransfer.effectAllowed;
+			});
+		});
+
+		const handleMoveOver = (e) => {
+			const { destination, source } = e.detail;
+
+
+			if (destination.placement === "On") {
+				return;
+			}
+
+			e.preventDefault();
+		};
+
+		document.getElementById("tree").addEventListener("ui5-move-over", handleMoveOver);
+		document.getElementById("list").addEventListener("ui5-move-over", handleMoveOver);
+		document.getElementById("tabContainer").addEventListener("ui5-move-over", handleMoveOver);
+
+		[...document.querySelectorAll("[movable]"), document.getElementById("tabContainer")].forEach((el) => {
+			el.addEventListener("dragstart", (e) => {
+				resetLogs();
+				document.getElementById("reqDropEffect").textContent = e.dataTransfer.dropEffect;
+				document.getElementById("reqEffectAllowed").textContent = e.dataTransfer.effectAllowed;
+			});
+		});
+	</script>
+</body>
+
+</html>
diff --git a/packages/main/test/pages/styles/DragAndDropGeneric.css b/packages/main/test/pages/styles/DragAndDropGeneric.css
@@ -0,0 +1,13 @@
+html,body {
+    height: 100%;
+}
+
+.label {
+    color: grey;
+}
+
+.events {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(6, 1fr);
+}