Dec 25, 2024 · Dec 25, 2024 · Dec 25, 2024
diff --git a/README.md b/README.md
 </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
 <!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
 // 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
 * {
  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;
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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>
Original file line number	Diff line number	Diff line change
		@@ -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);
		});
Original file line number	Diff line number	Diff line change
		@@ -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;
		}