웹에서 종종 Drag & Drop을 구현해야 할 경우가 있습니다.
HTML 과 CSS, JavaScript 로 구현해보겠습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Drag N Drop</title>
</head>
<body>
<div class="empty">
<div class="fill" draggable="true"></div>
</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<script src="script.js"></script>
</body>
</html>const fill = document.querySelector(".fill");
const empties = document.querySelectorAll(".empty");
fill.addEventListener("dragstart", dragStart);
fill.addEventListener("dragend", dragEnd);
for (const empty of empties) {
empty.addEventListener("dragover", dragOver);
empty.addEventListener("dragenter", dragEnter);
empty.addEventListener("dragleave", dragLeave);
empty.addEventListener("drop", dragDrop);
}
function dragStart() {
this.className += " hold";
setTimeout(() => (this.className = "invisible"), 0);
}
function dragEnd() {
this.className = "fill";
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
this.className += " hovered";
}
function dragLeave() {
this.className = "empty";
}
function dragDrop() {
this.className = "empty";
this.append(fill);
}* {
box-sizing: border-box;
}
body {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.empty {
height: 150px;
width: 150px;
margin: 10px;
border: solid 3px black;
background: white;
}
.fill {
background-image: url('https://source.unsplash.com/random/150x150');
height: 145px;
width: 145px;
cursor: pointer;
}
.hold {
border: solid 5px #ccc;
}
.hovered {
background-color: #333;
border-color: white;
border-style: dashed;
}
@media (max-width: 800px) {
body {
flex-direction: column;
}
}
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 웹 사이트에서 모바일 화면 레이아웃 보여주기 (0) | 2022.12.24 |
|---|---|
| [HTML/CSS] 웹 로딩 화면 만들어보기 (0) | 2022.12.09 |
| [ HTML / CSS ] 스크롤바 커스텀하기 (0) | 2022.11.21 |
| [ HTML / CSS ] 마우스 커서 커스텀하기 (0) | 2022.11.17 |
| [HTML/CSS] 버튼 애니메이션 만들어보기 (0) | 2022.11.09 |
