Skip to content

50Projects-HTML-CSS-JavaScript : Drag and Drop App #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 25, 2024
Merged

50Projects-HTML-CSS-JavaScript : Drag and Drop App #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
01c0b8a
Add a project
tajulafreen Dec 25, 2024
9287753
Update readme with the description
tajulafreen Dec 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
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
32 changes: 32 additions & 0 deletions Source-Code/DragAndDrop/index.html
View file
Open in desktop
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>
54 changes: 54 additions & 0 deletions Source-Code/DragAndDrop/script.js
View file
Open in desktop
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);
});
60 changes: 60 additions & 0 deletions Source-Code/DragAndDrop/style.css
View file
Open in desktop
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;
}