드래그한 요소를 드롭 대상 위에 놓으면 ondrop 이벤트가 발생합니다. HTML5의 드래그 앤 드롭(Drag and Drop) API에서 ondrop은 드래그 작업의 마지막 단계를 처리하는 핵심 이벤트로, 파일 업로드, 목록 순서 변경, 카드 정렬 등 다양한 UI 기능에 활용됩니다.
ondrop 이벤트의 동작 원리
드래그 앤 드롭은 여러 이벤트가 순차적으로 연결되어 동작합니다.
- dragstart – 드래그가 시작될 때 발생하며,
dataTransfer.setData()로 전송할 데이터를 설정합니다. - dragover – 드래그한 요소가 드롭 대상 위에 있을 때 계속 발생하며, 반드시
event.preventDefault()를 호출해야 드롭이 허용됩니다. - drop – 요소를 대상 위에 놓는 순간 발생하며,
dataTransfer.getData()로 데이터를 가져와 원하는 작업을 수행합니다. - dragend – 드래그 작업이 완료되면(성공 여부와 관계없이) 발생합니다.
예제 코드
다음 코드를 실행하면 두 박스 사이에서 요소를 자유롭게 드래그하여 옮길 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
.drag {
float: left;
width: 100px;
height: 35px;
border: 2px dashed #876587;
margin: 15px;
padding: 10px;
}
</style>
</head>
<body>
<div class="drag" ondrop="drop(event)" ondragover="dropNow(event)">
<p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">Drag!</p>
</div>
<div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div>
<div id="box"></div>
<p>왼쪽 상자의 요소를 오른쪽으로 드래그하거나, 그 반대로도 옮겨 보세요.</p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dropNow(event) {
event.preventDefault();
}
function dragEnd(event) {
document.getElementById("box").innerHTML = "Dragging ends!";
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("box").innerHTML = "The element dropped successfully!";
}
</script>
</body>
</html>코드 설명
dragStart 함수는 드래그가 시작되면 드래그 대상 요소의 id를 dataTransfer 객체에 저장합니다. dropNow 함수는 dragover 이벤트의 기본 동작(드롭 차단)을 막아 해당 영역에 드롭할 수 있도록 허용합니다. drop 함수는 저장된 id를 읽어와 해당 요소를 드롭된 위치로 이동시키고, 결과 메시지를 화면에 표시합니다.
주의할 점은 ondragover 핸들러에서 preventDefault()를 호출하지 않으면 ondrop 이벤트가 아예 발생하지 않는다는 것입니다. 이는 초보자가 가장 많이 실수하는 부분이므로 꼭 기억해 두세요.