ondrop 속성이란?
HTML의 ondrop 속성은 드래그한 요소를 특정 영역에 놓는(dropping) 순간에 지정된 스크립트를 실행하는 이벤트 핸들러입니다. 파일 업로드, 카드 정렬, 목록 재배치 같은 드래그 앤 드롭 인터랙션을 구현할 때 핵심적으로 사용됩니다.
참고: ondrop 이벤트가 정상적으로 발생하려면 대상 요소의 ondragover 이벤트에서 반드시 event.preventDefault()를 호출해야 합니다. 브라우저는 기본적으로 요소 위에 다른 요소를 드롭하는 것을 허용하지 않기 때문입니다.
예제
아래 예제 코드를 실행하면 ondrop 속성의 동작을 직접 확인할 수 있습니다. 왼쪽 박스를 오른쪽으로, 또는 오른쪽 박스를 왼쪽으로 드래그하여 옮겨 보세요.
<!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)" ondrag = "draggingNow(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 draggingNow(event) {
document.getElementById("box").innerHTML = "Dragged successfully!";
}
function dropNow(event) {
event.preventDefault();
}
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(event): 드래그가 시작되면
dataTransfer.setData()로 드래그 대상 요소의 id를 저장합니다. - draggingNow(event): 요소가 드래그되는 동안 상태 메시지를 화면에 표시합니다.
- dropNow(event): ondragover 이벤트에서 기본 동작을 차단하여 해당 영역에 드롭이 가능하도록 허용합니다.
- drop(event): ondrop 이벤트가 발생하면 저장된 데이터를 가져와 드롭된 위치로 요소를 이동시키고, 성공 메시지를 출력합니다.
이처럼 ondrop 속성과 함께 draggable, ondragstart, ondragover 이벤트를 조합하면 별도의 라이브러리 없이도 순수 HTML과 JavaScript만으로 드래그 앤 드롭 기능을 손쉽게 구현할 수 있습니다.