728x90
안녕하세요.
오늘은 자바스크립트에서 드래그 앤 드랍으로 이미지의 순서를 변경해보겠습니다.
먼저 틀이 되는 html 코드를 이용해서 이미지를 3개 준비합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="draggable" draggable="true">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="draggable" draggable="true">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="draggable" draggable="true">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
이미지 크기 등을 조정하기 위해 styles.css 도 작성합니다.
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 10px;
}
.draggable {
width: 400px; /* .draggable의 너비를 400픽셀로 설정 */
height: 400px; /* .draggable의 높이를 400픽셀로 설정 */
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box; /* border를 포함한 크기로 설정 */
}
.draggable img {
width: 100%; /* 이미지의 너비를 부모 요소의 100%로 설정 */
height: 100%; /* 이미지의 높이를 부모 요소의 100%로 설정 */
object-fit: cover; /* 이미지가 부모 요소에 맞게 잘리도록 설정 */
box-sizing: border-box; /* border를 포함한 크기로 설정 */
}
.drag-over {
border: 2px dashed #000;
}
이제 드래그 앤 드랍으로 이미지 순서 변경이 가능하도록 script.js 를 작성해보겠습니다.
// 모든 드래그 가능한 요소들을 선택합니다.
const draggables = document.querySelectorAll('.draggable');
// 현재 드래그 중인 요소를 저장하기 위한 변수를 선언합니다.
let draggedItem = null;
// 드래그 시작 이벤트 핸들러를 정의합니다.
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', (e) => {
draggedItem = draggable;
setTimeout(() => {
draggable.style.display = 'none';
}, 0);
});
// 드래그 끝날 때의 이벤트 핸들러를 정의합니다.
draggable.addEventListener('dragend', () => {
setTimeout(() => {
draggedItem.style.display = 'block';
draggedItem = null;
}, 0);
});
// 드래그 요소가 다른 요소 위로 올라왔을 때의 이벤트 핸들러를 정의합니다.
draggable.addEventListener('dragover', (e) => {
e.preventDefault();
});
// 드래그 요소가 다른 요소 안으로 들어갔을 때의 이벤트 핸들러를 정의합니다.
draggable.addEventListener('dragenter', (e) => {
e.preventDefault();
draggable.classList.add('drag-over');
});
// 드래그 요소가 다른 요소를 떠날 때의 이벤트 핸들러를 정의합니다.
draggable.addEventListener('dragleave', () => {
draggable.classList.remove('drag-over');
});
// 드롭 이벤트 핸들러를 정의합니다.
draggable.addEventListener('drop', () => {
draggable.classList.remove('drag-over');
if (draggedItem !== null) {
// 드래그 중인 요소와 현재 드래그가 놓인 요소의 위치를 바꿉니다.
const container = document.querySelector('.container');
const allDraggables = Array.from(container.querySelectorAll('.draggable'));
const currentPos = allDraggables.indexOf(draggable);
const draggedPos = allDraggables.indexOf(draggedItem);
if (currentPos < draggedPos) {
container.insertBefore(draggedItem, draggable);
} else {
container.insertBefore(draggedItem, draggable.nextSibling);
}
}
});
});
이렇게 하면 다음 영상처럼 드래그 앤 드랍을 통해 이미지의 순서가 변경되는 것을 확인할 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 사칙연산 계산기 만들기 (0) | 2024.08.16 |
|---|---|
| [JavaScript] 벽돌깨기 게임 만들기 (1) <canvas> 에 도형 그리기 (0) | 2024.08.12 |
| [JavaScript] 마우스 드래그로 캔버스에 네모와 동그라미 그리기 (0) | 2024.08.06 |
| [JavaScript] 다크 모드 토글 기능 구현 (0) | 2024.07.02 |
| [Javascript] dad joke 만들기 (0) | 2024.06.28 |
