HTML DOM의 DragEvent는 사용자가 선택한 텍스트나 요소를 드래그(drag)하여 드롭(drop)할 때 실행되는 이벤트 객체입니다. HTML5에서 새롭게 도입된 기능으로, 웹 페이지에서 요소를 자유롭게 끌어다 놓는 인터랙티브한 UI를 쉽게 구현할 수 있도록 도와줍니다.
주요 속성(Properties)
DragEvent 객체가 제공하는 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| dataTransfer | 사용자가 드래그하거나 드롭하는 데이터를 담고 있는 객체를 반환합니다. |
기본 문법(Syntax)
DragEvent의 기본적인 사용 문법은 다음과 같습니다.
Object.DragEventType = function_name;
여기서 function_name은 해당 이벤트가 발생했을 때 실행하고자 하는 함수를 의미합니다.
DragEvent의 이벤트 종류
DragEvent 객체에 속한 이벤트 타입은 다음과 같습니다.
| 이벤트 | 설명 |
|---|---|
| ondrag | 요소가 드래그되는 동안 발생합니다. |
| ondragend | 사용자가 요소의 드래그를 완료했을 때 발생합니다. |
| ondragenter | 드래그 중인 요소가 드롭 대상 영역에 진입했을 때 발생합니다. |
| ondragleave | 드래그 중인 요소가 드롭 대상 영역을 벗어났을 때 발생합니다. |
| ondragover | 드래그 중인 요소가 드롭 대상 위에 있는 동안 주기적으로 발생합니다. |
| ondragstart | 사용자가 요소 드래그를 시작하는 순간 발생합니다. |
| ondrop | 드래그 중이던 요소가 드롭 대상 위에 놓였을 때 발생합니다. |
실전 예제
다음은 span 요소를 한 div에서 다른 div로 드래그 앤 드롭하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.DivDrop {
float: left;
width: 100px;
height: 40px;
margin:10px;
border: 1px solid blue;
background-color:lightgreen;
font-weight:bold;
}
</style>
</head>
<body>
<h2>DragEvent example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</span>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
document.ondragstart = function(event) {
event.dataTransfer.setData("Text", "spanDrag");
document.getElementById("spanDrag").innerText="drag Text";
document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};
document.ondrag = function(event) {
document.getElementById("Sample").innerHTML = "Span element is being dragged";
};
document.ondragover = function(event) {
event.preventDefault();
};
document.ondrop = function(event) {
event.preventDefault();
if(event.target.className=="DivDrop"){
var txt = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(txt));
document.getElementById(txt).innerText="Dragged Text";
document.getElementById(txt).style.backgroundColor="lightyellow";
document.getElementById("Sample").innerHTML = "The span element is dropped";
}
};
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
"Drag This!" 텍스트를 드래그하기 시작하면 텍스트가 "drag Text"로 변경됩니다.
이어서 두 번째 div 영역에 텍스트를 드롭하면 아래와 같이 요소가 이동합니다.
예제 코드 상세 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. HTML 구조와 CSS 스타일 정의
먼저 동일한 클래스 이름 "DivDrop"을 가진 두 개의 div 요소를 생성했습니다. 같은 클래스를 사용하면 하나의 CSS 스타일을 두 요소에 공통으로 적용할 수 있습니다. 첫 번째 <div> 안에는 나중에 드래그할 <span> 요소가 포함되어 있습니다.
.DivDrop {
float: left;
width: 100px;
height: 40px;
margin:10px;
border: 1px solid blue;
background-color:lightgreen;
font-weight:bold;
}
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</span>
</div>
<div class="DivDrop"></div><span> 요소에는 draggable="true" 속성이 설정되어 있어야 해당 요소를 드래그할 수 있다는 점에 유의하세요.
2. ondragstart – 드래그 시작 처리
첫 번째 함수는 ondragstart 이벤트와 연결되어 있으며, 사용자가 텍스트 드래그를 시작하는 순간 실행됩니다. 이 함수 내부의 setData() 메서드는 드래그 데이터의 타입과 데이터를 저장하는 역할을 합니다. 여기서는 타입을 "Text", 데이터를 <span> 요소의 id로 지정했습니다. 실제 프로젝트에서는 event.target.id를 활용해 대상 요소의 id를 동적으로 가져오는 것이 더 안전합니다.
document.ondragstart = function(event) {
event.dataTransfer.setData("Text", "spanDrag");
document.getElementById("spanDrag").innerText="drag Text";
document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};3. ondrag – 드래그 진행 상태 표시
ondrag 이벤트와 연결된 함수는 사용자가 텍스트를 드래그하는 동안 <p> 요소의 innerHTML 속성을 이용해 "Span element is being dragged"라는 안내 문구를 표시합니다.
document.ondrag = function(event) {
document.getElementById("Sample").innerHTML = "Span element is being dragged";
};4. ondragover – 기본 동작 방지
ondragover 이벤트와 연결된 함수는 event.preventDefault() 메서드를 호출하여 dragover 시점에 발생하는 브라우저의 기본 동작을 차단합니다. dragover 이벤트는 드래그 중인 요소가 드롭 대상 위에 있는 동안 계속해서 반복적으로 발생합니다. 이 처리를 생략하면 drop 이벤트가 정상적으로 작동하지 않으므로 반드시 함께 작성해야 합니다.
document.ondragover = function(event) {
event.preventDefault();
};5. ondrop – 드롭 처리 및 유효성 검사
ondrop 이벤트와 연결된 함수 역시 먼저 기본 동작을 차단한 뒤, 드롭된 대상이 두 번째 <div> 요소(클래스명 "DivDrop")인지 확인합니다. 이 검사 과정이 없으면 텍스트가 페이지 어디에든 놓일 수 있어 웹 페이지의 레이아웃이 깨질 수 있습니다.
이후 getData() 메서드로 "Text" 타입의 드래그 데이터를 가져오면, 해당 데이터는 곧 <span> 요소의 id입니다. 이 id를 이용해 <span> 요소를 두 번째 div의 자식 노드로 추가(appendChild)하고, 텍스트 내용과 배경색을 변경하여 드롭 결과를 시각적으로 보여줍니다.
document.ondrop = function(event) {
event.preventDefault();
if(event.target.className=="DivDrop"){
var txt = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(txt));
document.getElementById(txt).innerText="Dragged Text";
document.getElementById(txt).style.backgroundColor="lightyellow";
document.getElementById("Sample").innerHTML = "The span element is dropped";
}
};마무리
HTML5의 DragEvent를 활용하면 별도의 외부 라이브러리 없이도 파일 업로드, 목록 순서 변경, 칸반 보드 등 다양한 드래그 앤 드롭 인터페이스를 구현할 수 있습니다. 핵심은 dataTransfer 객체로 데이터를 주고받고, preventDefault()로 브라우저 기본 동작을 제어하는 것입니다. 각 이벤트의 발생 시점과 순서를 정확히 이해하면 더욱 견고한 드래그 앤 드롭 기능을 만들 수 있습니다.