Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 59c14c5

Browse files
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

‎README.md

Lines changed: 11 additions & 0 deletions
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>

‎Source-Code/DragAndDrop/index.html

Lines changed: 32 additions & 0 deletions
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>

‎Source-Code/DragAndDrop/script.js

Lines changed: 54 additions & 0 deletions
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+
});

‎Source-Code/DragAndDrop/style.css

Lines changed: 60 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /