Merge pull request sadanandpai#7 from noorulaink00/main

added drag-and-drop-puzzle
surajsharma14 · Jul 4, 2023 · 1b5168d · 1b5168d
2 parents 9e9008d + 46078a1
commit 1b5168d
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 0 deletions.
diff --git a/native/helpers/challenges.js b/native/helpers/challenges.js
@@ -41,4 +41,5 @@ export const challenges = [
   { title: 'Sort Table', link: '#' },
   { title: 'Emoji Editor', link: '#' },
   { title: 'Infinite Scroll', link: '#' },
+  { title: 'Drag and Drop Puzzle', link: 'drag-and-drop-puzzle' },
 ];
diff --git a/native/mc/drag-and-drop-puzzle/index.html b/native/mc/drag-and-drop-puzzle/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css " />
+
+    <title>Document</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="puzzle-container">
+        <div class="piece" draggable="true" data-order="1">
+          <img src="./images/image1.jpg" alt="Piece 1" />
+        </div>
+        <div class="piece" draggable="true" data-order="2">
+          <img src="./images/image2.jpg" alt="Piece 2" />
+        </div>
+        <div class="piece" draggable="true" data-order="3">
+          <img src="./images/image3.jpg" alt="Piece 3" />
+        </div>
+        <div class="piece" draggable="true" data-order="4">
+          <img src="./images/image4.jpg" alt="Piece 4" />
+        </div>
+        <div class="piece" draggable="true" data-order="5">
+          <img src="./images/image5.jpg" alt="Piece 5" />
+        </div>
+        <div class="piece" draggable="true" data-order="6">
+          <img src="./images/image6.jpg" alt="Piece 6" />
+        </div>
+        <div class="piece" draggable="true" data-order="7">
+          <img src="./images/image7.jpg" alt="Piece 7" />
+        </div>
+        <div class="piece" draggable="true" data-order="8">
+          <img src="./images/image8.jpg" alt="Piece 8" />
+        </div>
+        <div class="piece" draggable="true" data-order="9">
+          <img src="./images/image9.jpg" alt="Piece 9" />
+        </div>
+      </div>
+    </div>
+
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/native/mc/drag-and-drop-puzzle/index.js b/native/mc/drag-and-drop-puzzle/index.js
@@ -0,0 +1,37 @@
+const pieces = document.querySelectorAll('.piece');
+
+let draggingPiece = null;
+
+function handleDragStart(event) {
+  event.currentTarget.classList.add('dragging');
+  draggingPiece = event.currentTarget;
+}
+
+function handleDragOver(event) {
+  event.preventDefault();
+}
+
+function handleDrop(event) {
+  event.preventDefault();
+  const dropPiece = event.currentTarget;
+
+  // Swap the order data attribute between the dragging and drop pieces
+  const tempOrder = draggingPiece.dataset.order;
+  draggingPiece.dataset.order = dropPiece.dataset.order;
+  dropPiece.dataset.order = tempOrder;
+
+  // Reorder the pieces based on the data-order attribute
+  const sortedPieces = Array.from(pieces).sort((a, b) => a.dataset.order - b.dataset.order);
+  const puzzleContainer = document.querySelector('.puzzle-container');
+  sortedPieces.forEach((piece) => puzzleContainer.appendChild(piece));
+
+  // Reset the draggingPiece variable and remove the dragging class
+  draggingPiece.classList.remove('dragging');
+  draggingPiece = null;
+}
+
+pieces.forEach((piece) => {
+  piece.addEventListener('dragstart', handleDragStart);
+  piece.addEventListener('dragover', handleDragOver);
+  piece.addEventListener('drop', handleDrop);
+});
diff --git a/native/mc/drag-and-drop-puzzle/style.css b/native/mc/drag-and-drop-puzzle/style.css
@@ -0,0 +1,35 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 50px;
+}
+
+.puzzle-container {
+  display: grid;
+  grid-template-columns: repeat(3, 200px);
+  grid-template-rows: repeat(3, 200px);
+  gap: 15px;
+  margin: auto;
+}
+
+.piece {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #ccc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: grab;
+}
+
+.piece img {
+  width: 100%;
+  height: 100%;
+}
+
+.piece.dragging {
+  opacity: 0.6;
+  cursor: grabbing;
+}
diff --git a/package-lock.json b/package-lock.json