ondragend 이벤트는 요소의 드래그 작업이 완전히 종료되었을 때 발생합니다.
ondragend 이벤트란?
HTML5 드래그 앤 드롭 API에서 ondragend는 사용자가 요소를 끌어온 뒤 마우스 버튼을 놓거나 Esc 키를 눌러 드래그를 마치는 순간 실행됩니다. 드롭이 성공했는지 여부와 관계없이 드래그 작업이 끝나면 항상 호출된다는 점이 특징입니다.
드래그 과정에서 발생하는 주요 이벤트는 다음과 같은 순서로 진행됩니다.
- dragstart – 드래그가 시작될 때 발생
- drag – 드래그가 진행되는 동안 계속 발생
- dragend – 드래그가 종료될 때 발생 (성공·실패 무관)
예제
아래 코드를 실행하면 JavaScript에서 ondragend 이벤트를 구현하는 방법을 직접 확인할 수 있습니다. 왼쪽 상자를 오른쪽으로 끌거나, 오른쪽 상자를 왼쪽으로 끌어 보세요.
<!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>Drag the left box to the right or drag the right box to the left.</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(event) 함수는 드래그가 시작될 때 dataTransfer.setData()를 통해 드래그 대상 요소의 ID를 저장합니다. dropNow(event) 함수는 기본 동작을 막아 해당 영역에 요소를 놓을 수 있도록 허용합니다. dragEnd(event) 함수는 드래그가 끝나는 시점에 결과 메시지를 화면에 출력하며, drop(event) 함수는 실제로 요소를 대상 영역에 추가하고 성공 메시지를 표시합니다.