HTML5 드래그 앤 드롭(Drag and Drop)
드래그 앤 드롭의 개념과 활용(Concept and Utilization of Drag and Drop)
드래그 앤 드롭(Drag and Drop)은 사용자가 마우스로 특정 요소를 클릭하고, 끌어서 다른 위치로 이동한 다음, 놓아주는 동작을 의미합니다. HTML5에서는 드래그 앤 드롭 기능을 지원하는 API를 제공하여, 웹 페이지에서 손쉽게 이러한 기능을 구현할 수 있게 합니다. 이를 활용하면 파일 업로드, 사용자 인터페이스(UI) 재배치, 쇼핑카트와 같은 다양한 인터랙티브 기능을 만들 수 있습니다.
활용 예시:
- 파일 업로드: 사용자가 파일을 드래그하여 업로드 영역에 놓는 기능.
- UI 재배치: 드래그를 통해 사용자 인터페이스의 구성 요소를 재배치.
- 쇼핑카트: 상품을 드래그하여 장바구니에 담는 기능.
HTML5 드래그 앤 드롭 API(HTML5 Drag and Drop API)
HTML5 드래그 앤 드롭 API는 draggable 속성과 여러 드래그 이벤트로 구성되어 있습니다. 드래그 앤 드롭을 구현하기 위해서는 드래그 가능한 요소 설정과 다양한 이벤트를 다루어야 합니다.
드래그 가능한 요소 설정: draggable 속성(Setting Draggable Elements: draggable Attribute)
드래그가 가능한 요소는 draggable="true" 속성을 설정하여 지정할 수 있습니다. 예를 들어, 이미지나 텍스트 요소를 드래그 가능하게 설정할 수 있습니다.
예제: 드래그 가능한 이미지 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>드래그 가능한 이미지</title>
</head>
<body>
<h1>드래그 가능한 이미지 설정</h1>
<img src="example.jpg" alt="드래그 가능한 이미지" draggable="true" id="dragImage">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>드래그 가능한 이미지</title>
</head>
<body>
<h1>드래그 가능한 이미지 설정</h1>
<img src="example.jpg" alt="드래그 가능한 이미지" draggable="true" id="dragImage">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>드래그 가능한 이미지</title>
</head>
<body>
<h1>드래그 가능한 이미지 설정</h1>
<img src="example.jpg" alt="드래그 가능한 이미지" draggable="true" id="dragImage">
</body>
</html>
드래그 이벤트: dragstart, dragover, drop, dragend(Drag Events: dragstart, dragover, drop, dragend)
드래그 앤 드롭 기능을 구현하려면 여러 드래그 이벤트를 다뤄야 합니다. 주요 이벤트는 다음과 같습니다:
- dragstart: 드래그를 시작할 때 발생.
- dragover: 드래그 중인 요소가 드롭 영역 위에 있을 때 발생.
- drop: 드래그한 요소를 드롭 영역에 놓을 때 발생.
- dragend: 드래그가 끝날 때 발생.
예제: 드래그 앤 드롭 구현
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>드래그 앤 드롭 예제</title>
<style>
#dragElement {
width: 100px;
height: 100px;
background-color: red;
}
#dropZone {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 20px;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
const data = event.dataTransfer.getData("text");
const element = document.getElementById(data);
event.target.appendChild(element);
}
</script>
</head>
<body>
<h1>드래그 앤 드롭 예제</h1>
<div id="dragElement" draggable="true" ondragstart="drag(event)">드래그 해보세요</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">여기에 드롭</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>드래그 앤 드롭 예제</title>
<style>
#dragElement {
width: 100px;
height: 100px;
background-color: red;
}
#dropZone {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 20px;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
const data = event.dataTransfer.getData("text");
const element = document.getElementById(data);
event.target.appendChild(element);
}
</script>
</head>
<body>
<h1>드래그 앤 드롭 예제</h1>
<div id="dragElement" draggable="true" ondragstart="drag(event)">드래그 해보세요</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">여기에 드롭</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>드래그 앤 드롭 예제</title>
<style>
#dragElement {
width: 100px;
height: 100px;
background-color: red;
}
#dropZone {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 20px;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
const data = event.dataTransfer.getData("text");
const element = document.getElementById(data);
event.target.appendChild(element);
}
</script>
</head>
<body>
<h1>드래그 앤 드롭 예제</h1>
<div id="dragElement" draggable="true" ondragstart="drag(event)">드래그 해보세요</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">여기에 드롭</div>
</body>
</html>
위 예제에서는 빨간 사각형(div)을 드래그하여 노란색 드롭 영역(div)에 드롭할 수 있습니다. 이를 위해 다음과 같은 단계를 거칩니다:
- draggable 속성: 드래그 가능한 요소에
draggable="true"속성을 설정. - drag 이벤트: 드래그 시작 시
drag함수가 호출되어,dataTransfer객체에 요소 ID를 저장. - dragover 이벤트: 드롭 영역에서
dragover이벤트가 발생할 때,allowDrop함수로 기본 동작을 막아 드롭을 허용. - drop 이벤트: 드래그한 요소를 드롭할 때,
drop함수가 호출되어dataTransfer객체에서 요소 ID를 가져와 드롭 영역에 추가.
이와 같이 HTML5 드래그 앤 드롭 API를 활용하여 다양한 인터랙티브 기능을 구현할 수 있습니다.