From 6f984ca77fc1b6d418f4a4824f2ceca500bf6ebd Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 May 2023 19:52:49 -0300
Subject: [PATCH] Fixed node dragging image

---
 .../components/extraSidebarComponent/index.tsx      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 1a9e721f7..7d7ebfb7c 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -14,7 +14,11 @@ export default function ExtraSidebar() {
     data: { type: string; node?: APIClassType }
   ) {
     //start drag event
-    event.dataTransfer.effectAllowed = "move";
+    var crt = event.currentTarget.cloneNode(true);
+    crt.style.position = "absolute"; crt.style.top = "-500px"; crt.style.right = "-500px";
+    crt.classList.add("cursor-grabbing");
+    document.body.appendChild(crt);
+    event.dataTransfer.setDragImage(crt, 0, 0);
     event.dataTransfer.setData("json", JSON.stringify(data));
   }
 
@@ -48,8 +52,13 @@ export default function ExtraSidebar() {
                             node: data[d][t],
                           })
                         }
+                        onDragEnd={() => {
+                          document.body.removeChild(
+                            document.getElementsByClassName("cursor-grabbing")[0]
+                          );
+                        }}
                       >
-                        <div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                        <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
                           <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
                             {t}
                           </span>