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 01c0b8a

Browse files
Add a project
1 parent 499dba1 commit 01c0b8a

File tree

3 files changed

+146
-0
lines changed

3 files changed

+146
-0
lines changed

‎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 によって変換されたページ (->オリジナル) /