HTML ondragend 이벤트 속성은 사용자가 HTML 요소나 텍스트의 드래그 작업을 마쳤을 때 실행되는 이벤트입니다. 즉, 요소를 끌다가 마우스 버튼을 놓는 순간(드래그가 성공하든 실패하든) 지정한 스크립트가 호출됩니다.
ondragend는 HTML5 드래그 앤 드롭(Drag & Drop) API의 일부로, ondragstart(드래그 시작), ondragover(드래그 중 통과), ondrop(요소 위에 놓기) 등의 이벤트와 함께 사용되어 완성도 높은 드래그 앤 드롭 인터페이스를 만들 수 있습니다.
문법(Syntax)
ondragend 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname ondragend="script"></tagname>
여기서 script 부분에는 드래그가 끝났을 때 실행할 JavaScript 코드를 작성합니다.
예제(Example)
이제 ondragend 이벤트 속성이 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다. 아래 코드에서는 빨간 원을 두 박스 사이로 드래그할 수 있으며, 드래그가 시작될 때와 끝날 때 각각 화면에 메시지가 표시됩니다.
<!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 ondragend Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondragend="dragFinished(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);
document.querySelector(".show").innerHTML = "Started to drag the red circle.";
}
function dragFinished(event) {
document.querySelector(".show").innerHTML = "Finished dragging the red circle.";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
event.target.appendChild(document.querySelector('.circle'));
}
</script>
</body>
</html>코드 설명
- draggable="true": 빨간 원(<p> 태그)을 드래그 가능한 요소로 설정합니다.
- ondragstart: 드래그가 시작되면 "Started to drag the red circle." 메시지를 출력합니다.
- ondragend: 드래그가 끝나면 "Finished dragging the red circle." 메시지를 출력합니다.
- ondragover / ondrop: 대상 박스가 드롭을 허용하도록 기본 동작을 방지하고, 실제 드롭 시 원을 해당 박스로 이동시킵니다.
실행 결과(Output)
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
이제 빨간 원을 두 박스 사이로 드래그 앤 드롭해 보세요. 드래그를 마치는 순간 ondragend 이벤트가 발생하여 하단에 "Finished dragging the red circle."이라는 메시지가 표시되는 것을 확인할 수 있습니다.
정리
ondragend 이벤트 속성은 드래그 작업의 종료 시점을 감지하는 데 유용합니다. 드래그가 성공적으로 완료되었는지 여부와 관계없이 항상 발생한다는 점을 기억하세요. 드래그 상태에 따라 UI 피드백을 제공하거나, 드래그 종료 후 추가 로직을 실행할 때 활용하면 됩니다.