From 97c847e56a21ee8ea7ddcc02b17ba1f64dd9932d Mon Sep 17 00:00:00 2001
From: Manisha Kumari <manisha.tkg08@gmail.com>
Date: Thu, 28 Nov 2024 13:12:34 +0530
Subject: [PATCH] Highlighted the category div with a yellow background when an
 overlap is detected.

---
 uli-word-cloud/js/script3.js | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/uli-word-cloud/js/script3.js b/uli-word-cloud/js/script3.js
index 2ef69a4..ef13fa5 100644
--- a/uli-word-cloud/js/script3.js
+++ b/uli-word-cloud/js/script3.js
@@ -1,22 +1,41 @@
 const dragingDiv = document.querySelector("#dragingDiv");
+const categoryDivs = document.querySelectorAll(".category");
+
 let isDragging = false;
 
 dragingDiv.addEventListener("mousedown", (e) => {
     isDragging = true;
 });
 
-let width = parseInt(dragingDiv.style.width)
-let height = parseInt(dragingDiv.style.height)
-// console.log(height/2);
-// console.log(width/2)
+let width = parseInt(dragingDiv.style.width);
+let height = parseInt(dragingDiv.style.height);
 
 document.addEventListener("mousemove", (e) => {
     if (isDragging) {
         dragingDiv.style.position = "absolute";
         const x = e.clientX;
         const y = e.clientY;
+
         dragingDiv.style.left = `${x - width / 2}px`;
-        dragingDiv.style.top = `${y - width / 2}px`;
+        dragingDiv.style.top = `${y - height / 2}px`;
+
+        categoryDivs.forEach(categoryDiv => {
+            const categoryRect = categoryDiv.getBoundingClientRect();
+            const draggingRect = dragingDiv.getBoundingClientRect();
+            const isOverlap = !(
+                draggingRect.right < categoryRect.left ||
+                draggingRect.left > categoryRect.right ||
+                draggingRect.bottom < categoryRect.top ||
+                draggingRect.top > categoryRect.bottom
+            );
+
+            if (isOverlap) {
+                console.log("Overlap detected with categoryDiv:", categoryDiv);
+                categoryDiv.style.backgroundColor = "yellow";
+            } else {
+                categoryDiv.style.backgroundColor = "";
+            }
+        });
     }
 });