Merge pull request #54 from tajulafreen/Drag_and_Drop

50Projects-HTML-CSS-JavaScript : Drag and Drop App
tajulafreen · Dec 25, 2024 · 59c14c5 · 59c14c5
2 parents 499dba1 + 9287753
commit 59c14c5
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -573,6 +573,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Drag and Drop App</summary>
+<p>This is a simple drag-and-drop app where users can move items from one list to another. It's a basic implementation of a task manager or an image gallery where users can organize their items by dragging and dropping.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/DragAndDrop/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/DragAndDrop">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/DragAndDrop/index.html b/Source-Code/DragAndDrop/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Drag and Drop App</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <div class="list" id="list1">
+      <h2>Task List 1</h2>
+      <ul>
+        <li draggable="true" id="task1">Task 1</li>
+        <li draggable="true" id="task2">Task 2</li>
+        <li draggable="true" id="task3">Task 3</li>
+      </ul>
+    </div>
+
+    <div class="list" id="list2">
+      <h2>Task List 2</h2>
+      <ul>
+        <li draggable="true" id="task4">Task 4</li>
+        <li draggable="true" id="task5">Task 5</li>
+        <li draggable="true" id="task6">Task 6</li>
+      </ul>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/DragAndDrop/script.js b/Source-Code/DragAndDrop/script.js
@@ -0,0 +1,54 @@
+// Get all the lists and list items
+const lists = document.querySelectorAll('.list');
+const items = document.querySelectorAll('li');
+
+// Drag start function to add the dragging class
+function dragStart(e) {
+  e.target.classList.add('dragging');
+}
+
+// Drag end function to remove the dragging class
+function dragEnd(e) {
+  e.target.classList.remove('dragging');
+}
+
+// Drag over function to allow dropping on the list
+function dragOver(e) {
+  e.preventDefault();
+}
+
+// Drag enter function to style the list when an item is dragged over
+function dragEnter(e) {
+  e.target.classList.add('over');
+}
+
+// Drag leave function to remove the styling when the item leaves the list
+function dragLeave(e) {
+  e.target.classList.remove('over');
+}
+
+// Drop function to move the dragged item into the list
+function drop(e) {
+  e.preventDefault();
+  const draggedItem = document.querySelector('.dragging');
+  e.target.classList.remove('over');
+
+  // If the target is a list, append the dragged item to it
+  if (e.target.classList.contains('list')) {
+    e.target.querySelector('ul').appendChild(draggedItem);
+  }
+}
+
+// Add event listeners for dragging items
+items.forEach((item) => {
+  item.addEventListener('dragstart', dragStart);
+  item.addEventListener('dragend', dragEnd);
+});
+
+// Add event listeners for the lists to accept dropped items
+lists.forEach((list) => {
+  list.addEventListener('dragover', dragOver);
+  list.addEventListener('dragenter', dragEnter);
+  list.addEventListener('dragleave', dragLeave);
+  list.addEventListener('drop', drop);
+});
diff --git a/Source-Code/DragAndDrop/style.css b/Source-Code/DragAndDrop/style.css
@@ -0,0 +1,60 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+}
+
+.container {
+  display: flex;
+  gap: 20px;
+}
+
+.list {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  width: 200px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+ul {
+  list-style-type: none;
+}
+
+li {
+  padding: 10px;
+  margin: 5px 0;
+  background-color: #4caf50;
+  color: white;
+  border-radius: 4px;
+  cursor: grab;
+  transition: background-color 0.3s ease;
+}
+
+li:hover {
+  background-color: #45a049;
+}
+
+/* When dragging an item */
+li.dragging {
+  opacity: 0.5;
+}
+
+.list.over {
+  border: 2px dashed #4caf50;
+  background-color: #f9f9f9;
+}