Skip to content

Commit 59c14c5

Browse files
tajulafreentajulafreen
authored
Merge pull request #54 from tajulafreen/Drag_and_Drop
50Projects-HTML-CSS-JavaScript : Drag and Drop App
2 parents 499dba1 + 9287753 commit 59c14c5

File tree

4 files changed

+157
-0
lines changed

4 files changed

+157
-0
lines changed

Diff for: ‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -573,6 +573,17 @@ In order to run this project you need:
573573
</details>
574574
</li>
575575

576+
<li>
577+
<details>
578+
<summary>Drag and Drop App</summary>
579+
<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>
580+
<ul>
581+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/DragAndDrop/">Live Demo</a></li>
582+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/DragAndDrop">Source</a></li>
583+
</ul>
584+
</details>
585+
</li>
586+
576587
</ol>
577588

578589
<p align="right">(<a href="#readme-top">back to top</a>)</p>

Diff for: ‎Source-Code/DragAndDrop/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Drag and Drop App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="list" id="list1">
12+
<h2>Task List 1</h2>
13+
<ul>
14+
<li draggable="true" id="task1">Task 1</li>
15+
<li draggable="true" id="task2">Task 2</li>
16+
<li draggable="true" id="task3">Task 3</li>
17+
</ul>
18+
</div>
19+
20+
<div class="list" id="list2">
21+
<h2>Task List 2</h2>
22+
<ul>
23+
<li draggable="true" id="task4">Task 4</li>
24+
<li draggable="true" id="task5">Task 5</li>
25+
<li draggable="true" id="task6">Task 6</li>
26+
</ul>
27+
</div>
28+
</div>
29+
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

Diff for: ‎Source-Code/DragAndDrop/script.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Get all the lists and list items
2+
const lists = document.querySelectorAll('.list');
3+
const items = document.querySelectorAll('li');
4+
5+
// Drag start function to add the dragging class
6+
function dragStart(e) {
7+
e.target.classList.add('dragging');
8+
}
9+
10+
// Drag end function to remove the dragging class
11+
function dragEnd(e) {
12+
e.target.classList.remove('dragging');
13+
}
14+
15+
// Drag over function to allow dropping on the list
16+
function dragOver(e) {
17+
e.preventDefault();
18+
}
19+
20+
// Drag enter function to style the list when an item is dragged over
21+
function dragEnter(e) {
22+
e.target.classList.add('over');
23+
}
24+
25+
// Drag leave function to remove the styling when the item leaves the list
26+
function dragLeave(e) {
27+
e.target.classList.remove('over');
28+
}
29+
30+
// Drop function to move the dragged item into the list
31+
function drop(e) {
32+
e.preventDefault();
33+
const draggedItem = document.querySelector('.dragging');
34+
e.target.classList.remove('over');
35+
36+
// If the target is a list, append the dragged item to it
37+
if (e.target.classList.contains('list')) {
38+
e.target.querySelector('ul').appendChild(draggedItem);
39+
}
40+
}
41+
42+
// Add event listeners for dragging items
43+
items.forEach((item) => {
44+
item.addEventListener('dragstart', dragStart);
45+
item.addEventListener('dragend', dragEnd);
46+
});
47+
48+
// Add event listeners for the lists to accept dropped items
49+
lists.forEach((list) => {
50+
list.addEventListener('dragover', dragOver);
51+
list.addEventListener('dragenter', dragEnter);
52+
list.addEventListener('dragleave', dragLeave);
53+
list.addEventListener('drop', drop);
54+
});

Diff for: ‎Source-Code/DragAndDrop/style.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
background-color: #f0f0f0;
14+
}
15+
16+
.container {
17+
display: flex;
18+
gap: 20px;
19+
}
20+
21+
.list {
22+
background-color: #fff;
23+
border-radius: 8px;
24+
padding: 20px;
25+
width: 200px;
26+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
27+
}
28+
29+
h2 {
30+
text-align: center;
31+
margin-bottom: 20px;
32+
}
33+
34+
ul {
35+
list-style-type: none;
36+
}
37+
38+
li {
39+
padding: 10px;
40+
margin: 5px 0;
41+
background-color: #4caf50;
42+
color: white;
43+
border-radius: 4px;
44+
cursor: grab;
45+
transition: background-color 0.3s ease;
46+
}
47+
48+
li:hover {
49+
background-color: #45a049;
50+
}
51+
52+
/* When dragging an item */
53+
li.dragging {
54+
opacity: 0.5;
55+
}
56+
57+
.list.over {
58+
border: 2px dashed #4caf50;
59+
background-color: #f9f9f9;
60+
}

0 commit comments

Comments
 (0)