HTML의 ondrop 이벤트 속성은 드래그 가능한(draggable) 요소나 텍스트가 유효한 드롭 대상 위에 놓이는 순간, 즉 드롭(drop)되는 시점에 실행됩니다. HTML5 드래그 앤 드롭 API의 핵심 구성 요소 중 하나로, 파일 업로드, 목록 재정렬, 카드 이동처럼 요소를 자유롭게 옮기는 인터랙티브 UI를 만들 때 널리 활용됩니다.
문법(Syntax)
ondrop 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname ondrop="script"></tagname>
ondrop 이벤트가 동작하기 위한 필수 조건
ondrop 이벤트는 단독으로 작동하지 않으며, 아래 조건들이 함께 갖춰져야 정상적으로 실행됩니다.
- draggable="true" : 드래그할 대상 요소에 draggable 속성을 반드시 true로 지정해야 합니다.
- ondragover + preventDefault() : 브라우저는 기본적으로 요소의 드롭을 차단하므로, 드롭 대상의 ondragover 이벤트에서 event.preventDefault()를 호출해야 ondrop 이벤트가 발생합니다.
- dataTransfer 객체 : 드래그 중인 데이터는 event.dataTransfer를 통해 설정(setData)하고 전달(getData)합니다.
예제(Example)
아래 예제는 두 개의 드롭 대상 박스 사이에서 빨간 원을 드래그 앤 드롭하며 ondrop 이벤트 속성의 동작을 확인하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.drop-target {
display: inline-block;
width: 150px;
height: 150px;
border: 2px solid #FFF;
margin: 1rem;
vertical-align: middle;
padding: 20px;
}
.circle {
background: #db133a;
height: 40px;
width: 40px;
border-radius: 50%;
}
.show {
color: #fff;
font-size: 1.2rem;
}
</style>
</head>
<body>
<h1>HTML ondrop Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="circle"></p>
</div>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p>Now try to drag and drop the red circle</p>
<div class="show"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.querySelector(".show").innerHTML = "Circle is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
event.target.appendChild(document.querySelector('.circle'));
document.querySelector(".show").innerHTML = "Circle was dropped";
}
</script>
</body>
</html>
코드 설명
- dragStart(event) : 드래그가 시작되면 dataTransfer.setData()로 전송할 데이터를 저장합니다.
- dragging(event) : 드래그가 진행되는 동안 화면에 상태 메시지("Circle is being dragged")를 표시합니다.
- allowDrop(event) : ondragover 이벤트에서 preventDefault()를 호출해 해당 영역을 유효한 드롭 대상으로 만듭니다.
- drop(event) : 드롭이 발생하면 기본 동작을 막고, 빨간 원을 해당 박스 안으로 이동시킨 뒤 완료 메시지("Circle was dropped")를 출력합니다.
실행 결과(Output)
위 코드를 실행하면 그라데이션 배경 위에 두 개의 드롭 대상 박스와 빨간 원이 표시됩니다.
이제 빨간 원을 마우스로 잡고 양쪽 박스 사이를 드래그 앤 드롭해 보세요. 원이 새로운 박스로 이동하면서 ondrop 이벤트 속성이 실제로 어떻게 작동하는지 직접 확인할 수 있습니다.
