Feature/drag and drop functionality (tattle-made#9)

drag div across divs- manisha
Mahimahto · Nov 28, 2024 · bfc04ad · bfc04ad
1 parent 97d7d88
commit bfc04ad
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 23 deletions.
diff --git a/uli-word-cloud/js/manisha.html b/uli-word-cloud/js/manisha.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Uli-Word-Cloud</title>
+    <title>Draggable Box</title>
     <link rel="stylesheet" href="style.css">
 </head>
-
 <body>
-    <h1>Draging-Box</h1>
-    <div id="main-container" style="width: 500px; height: 600px;"></div>
+    <h1>Dragging Box</h1>
+    <div id="dragingDiv" style="width: 100px; height: 100px;"></div>
+    <div class="category" id="category-a">Category A</div>
+    <div class="category" id="category-b">Category B</div>
+    <div class="category" id="category-c">Category C</div>
+    <div class="category" id="category-d">Category D</div>
+    <div class="category" id="category-e">Category E</div>
 </body>
 <script src="script3.js"></script>
-
-</html>
+</html>
diff --git a/uli-word-cloud/js/script3.js b/uli-word-cloud/js/script3.js
@@ -1,24 +1,63 @@
-const mainContainer = document.querySelector("#main-container");
-let isDragging = false; 
+const dragingDiv = document.querySelector("#dragingDiv");
+const categoryDivs = document.querySelectorAll(".category");
 
-mainContainer.addEventListener("mousedown", (e) => {
-    isDragging = true; 
-});
+let isDragging = false;
+let currentCategory = null; 
+
+// Initial dimensions of the dragging div
+let width = parseInt(dragingDiv.style.width);
+let height = parseInt(dragingDiv.style.height);
 
-let width = parseInt(mainContainer.style.width)
-let height = parseInt(mainContainer.style.height)
-// console.log(height/2);
-// console.log(width/2)
+dragingDiv.addEventListener("mousedown", (e) => {
+    isDragging = true;
+});
 
 document.addEventListener("mousemove", (e) => {
-    if (isDragging) { 
+    if (isDragging) {
+        // Move the dragging div with the cursor
+        dragingDiv.style.position = "absolute";
         const x = e.clientX;
         const y = e.clientY;
-        mainContainer.style.left = `${x - width/2}px`;
-        mainContainer.style.top = `${y - width/2}px`;
+
+        dragingDiv.style.left = `${x - width / 2}px`;
+        dragingDiv.style.top = `${y - height / 2}px`;
+
+        currentCategory = null; // Reset current category
+        categoryDivs.forEach((categoryDiv) => {
+            const categoryRect = categoryDiv.getBoundingClientRect();
+            const draggingRect = dragingDiv.getBoundingClientRect();
+
+            // Check for overlap
+            const isOverlap = !(
+                draggingRect.right < categoryRect.left ||
+                draggingRect.left > categoryRect.right ||
+                draggingRect.bottom < categoryRect.top ||
+                draggingRect.top > categoryRect.bottom
+            );
+
+            if (isOverlap) {
+                categoryDiv.style.backgroundColor = "yellow";
+                currentCategory = categoryDiv; 
+            } else {
+                categoryDiv.style.backgroundColor = "";
+            }
+        });
     }
 });
 
 document.addEventListener("mouseup", () => {
-    isDragging = false; 
+    if (isDragging && currentCategory) {
+        const categoryRect = currentCategory.getBoundingClientRect();
+        const parentRect = currentCategory.offsetParent.getBoundingClientRect(); 
+
+        const centerX = categoryRect.left - parentRect.left + categoryRect.width / 2;
+        const centerY = categoryRect.top - parentRect.top + categoryRect.height / 2;
+        console.log(currentCategory);
+
+        dragingDiv.style.left = `${centerX - width / 2}px`;
+        dragingDiv.style.top = `${centerY - height / 2}px`;
+        currentCategory.appendChild(dragingDiv);
+    }
+
+    isDragging = false;
 });
diff --git a/uli-word-cloud/js/style.css b/uli-word-cloud/js/style.css
@@ -1,6 +1,13 @@
-
-#main-container {
-  position: absolute;
+#dragingDiv {
+  /* position: absolute; */
   background-color: blue;
 }
 
+.category{
+  display: inline-block;
+  text-align: center;
+  width: 300px;
+  height: 300px;
+  border: 1px solid black;
+  margin-top: 10px;
+}