Skip to content

Commit b6b662a

Browse files
CohPholCohPhol
committed
Practice
1 parent 758e911 commit b6b662a

File tree

4 files changed

+166
-7
lines changed

4 files changed

+166
-7
lines changed

‎assets/css/root.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
:root{
1+
:root {
22
--bg-pink: rgb(232, 219, 212);
33
--bg-light-pink: rgb(245, 240, 236);
44
--container-shadow: rgba(0, 0, 0, 0.3);

‎assets/css/style.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.nav-container {
2+
display: flex;
3+
justify-content: center;
4+
border: 1px solid black;
5+
}
6+
7+
.nav-container button {
8+
padding: 10px 20px;
9+
color: white;
10+
border: none;
11+
cursor: pointer;
12+
background-color: #007bff;
13+
}
14+
15+
.nav-container button:hover {
16+
background-color: #0056b3;
17+
}
18+
19+
.container {
20+
display: grid;
21+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
22+
gap: 2rem;
23+
max-width: 60%;
24+
margin: 2rem auto;
25+
border: 1px solid black;
26+
padding: 1rem;
27+
}
28+
29+
.card {
30+
cursor: grab;
31+
border: 1px solid #ccc;
32+
transition: transform 0.3s ease, box-shadow 0.2s;
33+
}
34+
35+
.card:active {
36+
cursor: grabbing;
37+
}
38+
39+
.card:hover {
40+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
41+
}
42+
43+
.dragging {
44+
opacity: 0.5;
45+
transform: scale(1.05);
46+
}

‎assets/js/main.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const cards = document.querySelectorAll('.card');
2+
const container = document.getElementById('cardContainer');
3+
4+
let draggedCard = null;
5+
6+
cards.forEach(card => {
7+
card.addEventListener('dragstart', dragStart);
8+
card.addEventListener('dragend', dragEnd);
9+
});
10+
11+
container.addEventListener('dragover', dragOver);
12+
container.addEventListener('drop', drop);
13+
14+
function dragStart(e) {
15+
draggedCard = this;
16+
setTimeout(() => {
17+
this.classList.add('dragging');
18+
}, 0);
19+
}
20+
21+
function dragEnd() {
22+
this.classList.remove('dragging');
23+
draggedCard = null;
24+
}
25+
26+
function dragOver(e) {
27+
e.preventDefault();
28+
const target = e.target.closest('.card');
29+
30+
if (target && target !== draggedCard) {
31+
const cardsArray = Array.from(container.children);
32+
const draggedIndex = cardsArray.indexOf(draggedCard);
33+
const targetIndex = cardsArray.indexOf(target);
34+
35+
if (draggedIndex < targetIndex) {
36+
container.insertBefore(draggedCard, target.nextSibling);
37+
container.insertBefore(target, cardsArray[draggedIndex + 1]);
38+
} else {
39+
container.insertBefore(target, draggedCard);
40+
container.insertBefore(draggedCard, target);
41+
}
42+
}
43+
}
44+
45+
function drop(e) {
46+
e.preventDefault();
47+
}

‎index.html

Lines changed: 72 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,85 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv='cache-control' content='no-cache'>
7-
<meta http-equiv='expires' content='0'>
7+
<meta http-equiv='cache-control' content='no-cache'>
8+
<meta http-equiv='expires' content='0'>
89
<meta http-equiv='pragma' content='no-cache'>
9-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
10+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
1012
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
1113
<link rel="stylesheet" href="./assets/css/root.css">
12-
13-
<title>Surprise</title>
14+
<link rel="stylesheet" href="./assets/css/style.css">
15+
16+
<title>Surprise</title>
1417
</head>
18+
1519
<body>
20+
<!-- <div class="nav-container">
21+
<button>All</button>
22+
<button>About</button>
23+
<button>Projects</button>
24+
</div> -->
1625

17-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
26+
<div class="container" id="cardContainer">
27+
<div class="card" draggable="true">
28+
<div class="card-body">
29+
<h5 class="card-title">Card 1</h5>
30+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
31+
content.</p>
32+
</div>
33+
</div>
34+
<div class="card" draggable="true">
35+
<div class="card-body">
36+
<h5 class="card-title">Card 2</h5>
37+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
38+
content.</p>
39+
</div>
40+
</div>
41+
<div class="card" draggable="true">
42+
<div class="card-body">
43+
<h5 class="card-title">Card 3</h5>
44+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
45+
content.</p>
46+
</div>
47+
</div>
48+
<div class="card" draggable="true">
49+
<div class="card-body">
50+
<h5 class="card-title">Card 4</h5>
51+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
52+
content.</p>
53+
</div>
54+
</div>
55+
<div class="card" draggable="true">
56+
<div class="card-body">
57+
<h5 class="card-title">Card 5</h5>
58+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
59+
content.</p>
60+
</div>
61+
</div>
62+
<div class="card" draggable="true">
63+
<div class="card-body">
64+
<h5 class="card-title">Card 6</h5>
65+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
66+
content.</p>
67+
</div>
68+
</div>
69+
<div class="card" draggable="true">
70+
<div class="card-body">
71+
<h5 class="card-title">Card 7</h5>
72+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
73+
content.</p>
74+
</div>
75+
</div>
76+
</div>
77+
78+
79+
<script src="./assets/js/main.js"></script>
80+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
81+
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
82+
crossorigin="anonymous"></script>
1883
</body>
84+
1985
</html>

0 commit comments

Comments
 (0)