From 26d66540efaf28a5adf68459f991122d99003d4f Mon Sep 17 00:00:00 2001
From: igor <mino@tpsoft.org>
Date: Sat, 3 May 2025 12:05:40 +0200
Subject: [PATCH] oprava efektu pre presun Reportu podla konvencie Vue, bez
 priamej manupulacie s DOM

---
 webapp/src/views/Dashboard.vue | 38 ++++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/webapp/src/views/Dashboard.vue b/webapp/src/views/Dashboard.vue
index e6f6b97..77fca60 100644
--- a/webapp/src/views/Dashboard.vue
+++ b/webapp/src/views/Dashboard.vue
@@ -11,7 +11,12 @@
 				@end="onDragEnd"
 			>
 				<template #item="{ element }">
-					<div class="draggable-item">
+					<div
+						:class="{
+							'draggable-item': true,
+							dragging: isDragable(element),
+						}"
+					>
 						<Report
 							:title="element.title"
 							:description="element.description"
@@ -32,7 +37,12 @@
 				@end="onDragEnd"
 			>
 				<template #item="{ element }">
-					<div class="draggable-item">
+					<div
+						:class="{
+							'draggable-item': true,
+							dragging: isDragable(element),
+						}"
+					>
 						<Report
 							:title="element.title"
 							:description="element.description"
@@ -53,7 +63,12 @@
 				@end="onDragEnd"
 			>
 				<template #item="{ element }">
-					<div class="draggable-item">
+					<div
+						:class="{
+							'draggable-item': true,
+							dragging: isDragable(element),
+						}"
+					>
 						<Report
 							:title="element.title"
 							:description="element.description"
@@ -74,7 +89,12 @@
 				@end="onDragEnd"
 			>
 				<template #item="{ element }">
-					<div class="draggable-item">
+					<div
+						:class="{
+							'draggable-item': true,
+							dragging: isDragable(element),
+						}"
+					>
 						<Report
 							:title="element.title"
 							:description="element.description"
@@ -90,11 +110,17 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
+const itemDragable = ref(0);
+
 function onDragStart(evt) {
-	evt.item.classList.add("dragging");
+	itemDragable.value = evt.item.__vnode.key;
 }
 function onDragEnd(evt) {
-	evt.item.classList.remove("dragging");
+	itemDragable.value = 0;
+}
+function isDragable(element) {
+	return itemDragable.value === element.id;
 }
 </script>