drag and drop 만들어보기!
시연 영상
HTML 코드 (파일 명:drag.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="drag.css" />
<title>drag</title>
</head>
<script>
</script>
<body>
<div class="container">
<button class="draggable" draggable="true">🦊</button>
<button class="draggable" draggable="true">🐸</button>
</div>
<div class="container">
<button class="draggable" draggable="true">🐶</button>
<button class="draggable" draggable="true">🐱</button>
</div>
<script src="drag.js"></script>
</body>
</html>
Javascript 코드(파일 명: drag.js)
const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");
draggables.forEach(draggable => {
draggable.addEventListener("dragstart", () => {
draggable.classList.add("dragging");
});
draggable.addEventListener("dragend", () => {
draggable.classList.remove("dragging");
});
});
containers.forEach(container => {
container.addEventListener("dragover", e => {
e.preventDefault();
const afterElement = getDragAfterElement(container, e.clientX);
const draggable = document.querySelector(".dragging");
if (afterElement === undefined) {
container.appendChild(draggable);
} else {
container.insertBefore(draggable, afterElement);
}
});
});
function getDragAfterElement(container, x) {
const draggableElements = [
...container.querySelectorAll(".draggable:not(.dragging)"),
];
return draggableElements.reduce(
(closest, child) => {
const box = child.getBoundingClientRect();
const offset = x - box.left - box.width / 2;
// console.log(offset);
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
},
{ offset: Number.NEGATIVE_INFINITY },
).element;
}
CSS 코드(파일 명: drag.css)
body {
margin: 0;
padding: 0;
background-color: #3d4e56fa;
display: flex;
}
button {
width: 70px;
height: 70px;
border: none;
border-radius: 8px;
margin: 12px;
cursor: move;
font-size: 30px;
background: #eaeaea4f;
}
.container {
margin: 10px;
padding: 10px;
background-color: #b5c1dc57;
border-radius: 8px;
}
.draggable.dragging {
opacity: 0.5;
}'JavaScript 시리즈☕' 카테고리의 다른 글
| CRUD 이용해서 사용자 정보 저장 페이지 만들어보기 (0) | 2022.11.20 |
|---|---|
| 사진 미리보기 사이트 만들기 (HTML,JS 사용) (0) | 2022.11.20 |
| JSON 정리.txt (1) | 2022.08.02 |
| 🚀명언 적용 하기 + 배경 설정하기🚀 | JavaScript 시리즈 020 (6) | 2021.08.08 |
| 🚀Time (시계) 만들기(🔥통합정리🔥)🚀 | JavaScript 시리즈 019 (6) | 2021.08.08 |
