Skip to content

Commit 5bc6a33

Browse files
solygambassolygambas
committed
add drag and drop
1 parent 7bb6c59 commit 5bc6a33

File tree

4 files changed

+104
-1
lines changed

4 files changed

+104
-1
lines changed

‎21-drag n drop/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Drag N Drop</title>
8+
</head>
9+
<body>
10+
<div class="empty">
11+
<div class="fill" draggable="true"></div>
12+
</div>
13+
<div class="empty"></div>
14+
<div class="empty"></div>
15+
<div class="empty"></div>
16+
<div class="empty"></div>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎21-drag n drop/script.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const fill = document.querySelector(".fill");
2+
const empties = document.querySelectorAll(".empty");
3+
4+
const dragStart = function () {
5+
this.className += " hold";
6+
setTimeout(() => (this.className = "invisible"), 0);
7+
};
8+
9+
const dragEnd = function () {
10+
this.className = "fill";
11+
};
12+
13+
const dragOver = function (e) {
14+
// Ref: https://developer.cdn.mozilla.net/en-US/docs/Web/API/Document/dragover_event
15+
e.preventDefault();
16+
};
17+
18+
const dragEnter = function (e) {
19+
e.preventDefault();
20+
this.className += " hovered";
21+
};
22+
23+
const dragLeave = function () {
24+
this.className = "empty";
25+
};
26+
27+
const dragDrop = function () {
28+
this.className = "empty";
29+
this.append(fill);
30+
};
31+
32+
fill.addEventListener("dragstart", dragStart);
33+
fill.addEventListener("dragend", dragEnd);
34+
35+
for (const empty of empties) {
36+
empty.addEventListener("dragover", dragOver);
37+
empty.addEventListener("dragenter", dragEnter);
38+
empty.addEventListener("dragleave", dragLeave);
39+
empty.addEventListener("drop", dragDrop);
40+
}

‎21-drag n drop/style.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: steelblue;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
height: 100vh;
11+
overflow: hidden;
12+
margin: 0;
13+
}
14+
15+
.empty {
16+
height: 150px;
17+
width: 150px;
18+
margin: 10px;
19+
border: solid 3px black;
20+
background: white;
21+
}
22+
23+
.fill {
24+
background-image: url("https://source.unsplash.com/random/150x150");
25+
height: 145px;
26+
width: 145px;
27+
cursor: pointer;
28+
}
29+
30+
.hold {
31+
border: solid 5px #ccc;
32+
}
33+
34+
.hovered {
35+
background-color: #333;
36+
border-color: white;
37+
border-style: dashed;
38+
}
39+
40+
@media (max-width: 800px) {
41+
body {
42+
flex-direction: column;
43+
}
44+
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
| 18 | [Background Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/18-background%20slider) | [Live Demo](https://codepen.io/solygambas/pen/OJRrVbJ) |
2727
| 19 | [Theme Clock](https://github.com/solygambas/html-css-fifty-projects/tree/master/19-theme%20clock) | [Live Demo](https://codepen.io/solygambas/pen/MWjZrZy) |
2828
| 20 | [Button Ripple Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/20-button%20ripple%20effect) | [Live Demo](https://codepen.io/solygambas/pen/oNzJdWw) |
29-
| 21 | [Drag N Drop](https://github.com/solygambas/html-css-fifty-projects/tree/master/drag-n-drop) | [Live Demo](/drag-n-drop/) |
29+
| 21 | [Drag N Drop](https://github.com/solygambas/html-css-fifty-projects/tree/master/21-dragn%20nn%20drop) | [Live Demo](https://codepen.io/solygambas/pen/RwGEyme) |
3030
| 22 | [Drawing App](https://github.com/solygambas/html-css-fifty-projects/tree/master/drawing-app) | [Live Demo](/drawing-app/) |
3131
| 23 | [Kinetic Loader](https://github.com/solygambas/html-css-fifty-projects/tree/master/kinetic-loader) | [Live Demo](/kinetic-loader/) |
3232
| 24 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/content-placeholder) | [Live Demo](/content-placeholder/) |

0 commit comments

Comments
 (0)