드래그 앤 드롭(Drag and Drop) 기능을 구현하기 위해서는 다음과 같은 주요 기능과 단계를 작성해야 합니다. 여기서는 HTML5의 Drag and Drop API를 사용하여 간단한 예제를 통해 설명하겠습니다.
주요 기능
드래그 가능한 요소 만들기: 드래그 가능한 요소를 정의하고, 해당 요소에 draggable 속성을 추가합니다.
드래그 시작 이벤트 처리: 사용자가 드래그를 시작할 때 발생하는 이벤트를 처리합니다.
드래그 중 이벤트 처리: 사용자가 드래그 중인 요소를 이동할 때 발생하는 이벤트를 처리합니다.
드래그 종료 이벤트 처리: 드롭할 수 있는 영역에 드래그된 요소를 놓았을 때 발생하는 이벤트를 처리합니다.
드롭 가능한 영역 정의: 드롭할 수 있는 영역을 정의하고, 해당 영역에 필요한 이벤트 리스너를 추가합니다.
단계별 구현
1. HTML 구조 정의
<!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>
<style>
#drag1 {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
#dropZone {
width: 300px;
height: 300px;
border: 2px dashed #000;
text-align: center;
line-height: 300px;
margin: 10px;
}
</style>
</head>
<body>
<div id="drag1" draggable="true">Drag me</div>
<div id="dropZone">Drop here</div>
<script src="app.js"></script>
</body>
</html>2. JavaScript 코드 작성
// app.js
document.addEventListener('DOMContentLoaded', () => {
const dragItem = document.getElementById('drag1');
const dropZone = document.getElementById('dropZone');
// 드래그 시작 이벤트
dragItem.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
e.target.style.opacity = '0.5';
});
// 드래그 종료 이벤트
dragItem.addEventListener('dragend', (e) => {
e.target.style.opacity = '1';
});
// 드롭 가능한 영역에 들어올 때 이벤트
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 기본 동작을 방지하여 drop이 가능하게 함
e.dataTransfer.dropEffect = 'move';
});
// 드롭 가능한 영역을 벗어날 때 이벤트
dropZone.addEventListener('dragleave', (e) => {
e.target.style.backgroundColor = '';
});
// 드롭 이벤트
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text');
const draggableElement = document.getElementById(id);
e.target.appendChild(draggableElement);
e.target.style.backgroundColor = '';
});
});상세 설명
드래그 가능한 요소 만들기
draggable="true" 속성을 추가하여 드래그할 수 있는 요소를 만듭니다.
드래그 시작 이벤트 처리
dragstart 이벤트는 사용자가 드래그를 시작할 때 발생합니다. dataTransfer.setData를 사용하여 드래그한 요소의 ID를 저장합니다.
e.target.style.opacity를 변경하여 드래그 중인 요소의 스타일을 조정할 수 있습니다.
드래그 종료 이벤트 처리
dragend 이벤트는 드래그가 끝났을 때 발생합니다. 이 이벤트에서 요소의 스타일을 원래대로 복원할 수 있습니다.
드래그 중 이벤트 처리
dragover 이벤트는 드래그 중인 요소가 드롭 영역 위에 있을 때 발생합니다. 이 이벤트에서 e.preventDefault()를 호출하여 기본 동작(예: 파일을 여는 동작)을 방지하고, 드롭이 가능하도록 합니다.
드롭 이벤트 처리
drop 이벤트는 드래그한 요소를 드롭할 때 발생합니다. e.preventDefault()를 호출하여 기본 동작을 방지하고, dataTransfer.getData를 사용하여 드래그한 요소의 ID를 가져옵니다. 그런 다음, 드래그한 요소를 드롭 영역에 추가합니다.
추가 기능
드래그 중 스타일 변경: 드래그 중에 드롭 가능한 영역의 스타일을 변경하여 사용자가 드롭할 수 있는 위치를 시각적으로 나타낼 수 있습니다.
다중 드래그 및 드롭: 여러 요소를 동시에 드래그하고 드롭할 수 있도록 구현할 수 있습니다.
데이터 전달: 드래그한 요소의 데이터를 드롭 영역으로 전달하여 다양한 처리를 할 수 있습니다.
드래그 취소: 사용자가 드래그를 취소하거나 드롭 영역이 아닌 곳에 드롭할 때의 처리를 구현할 수 있습니다.
최종 코드
HTML
<!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>
<style>
#drag1 {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
#dropZone {
width: 300px;
height: 300px;
border: 2px dashed #000;
text-align: center;
line-height: 300px;
margin: 10px;
}
</style>
</head>
<body>
<div id="drag1" draggable="true">Drag me</div>
<div id="dropZone">Drop here</div>
<script src="app.js"></script>
</body>
</html>JavaScript
// app.js
document.addEventListener('DOMContentLoaded', () => {
const dragItem = document.getElementById('drag1');
const dropZone = document.getElementById('dropZone');
// 드래그 시작 이벤트
dragItem.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
e.target.style.opacity = '0.5';
});
// 드래그 종료 이벤트
dragItem.addEventListener('dragend', (e) => {
e.target.style.opacity = '1';
});
// 드롭 가능한 영역에 들어올 때 이벤트
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 기본 동작을 방지하여 drop이 가능하게 함
e.dataTransfer.dropEffect = 'move';
});
// 드롭 가능한 영역을 벗어날 때 이벤트
dropZone.addEventListener('dragleave', (e) => {
e.target.style.backgroundColor = '';
});
// 드롭 이벤트
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text');
const draggableElement = document.getElementById(id);
e.target.appendChild(draggableElement);
e.target.style.backgroundColor = '';
});
});이 예제에서는 기본적인 드래그 앤 드롭 기능을 구현했습니다. 이를 바탕으로 필요에 따라 추가 기능을 구현하거나 확장할 수 있습니다.
