HTML ondragleave 이벤트 속성은 드래그 가능한 요소나 텍스트가 HTML 문서 내에서 유효한 드롭 대상(drop target) 영역을 벗어나는 순간 실행되는 이벤트 핸들러입니다. 주로 드래그 앤 드롭 인터페이스에서 하이라이트 효과를 제거하거나 사용자에게 시각적 피드백을 제공할 때 활용됩니다.
구문(Syntax)
ondragleave 이벤트 속성의 기본 구문은 다음과 같습니다.
<tagname ondragleave="script"></tagname>
ondragleave는 ondragenter와 짝을 이루는 이벤트로, 드래그 중인 요소가 드롭 존에 진입할 때 dragenter가, 해당 영역을 떠날 때 dragleave가 각각 발생합니다. 이 두 이벤트를 함께 사용하면 드롭 가능 영역을 직관적으로 표시할 수 있습니다.
예제(Example)
다음 예제는 두 개의 드롭 박스와 빨간 원을 이용해 ondragleave 이벤트 속성의 동작 방식을 보여줍니다. 원을 드래그하여 박스에 들어갔다가 나가면 배경색이 변하고 안내 메시지가 화면에 출력됩니다.
<!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 ondragleave Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget" class='circle'></p>
</div>
<div class="drop-target" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" 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 dragEnter(event) {
if (event.target.className == "drop-target") {
event.target.style.background = "#db133a3d";
document.querySelector(".show").innerHTML = "Passed into the dropzone";
}
}
function dragLeave(event) {
if (event.target.className == "drop-target") {
event.target.style.background = "transparent";
document.querySelector(".show").innerHTML = "Passed out the dropzone";
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.querySelector('.circle'));
}
</script>
</body>
</html>
코드 설명
- dragStart(): 드래그가 시작되면 dataTransfer 객체에 대상 요소의 id를 저장합니다.
- dragEnter(): 드래그 요소가 드롭 존에 진입하면 배경색을 반투명 빨간색으로 변경하고 안내 문구를 표시합니다.
- dragLeave(): 드래그 요소가 드롭 존을 벗어나면 배경색을 투명으로 되돌리고 메시지를 갱신합니다. 바로 이 부분에서 ondragleave 이벤트가 작동합니다.
- allowDrop(): 기본 드래그 동작을 허용하기 위해 preventDefault()를 호출합니다.
- drop(): 드롭이 완료되면 저장된 데이터를 가져와 해당 위치에 원을 추가합니다.
실행 결과(Output)
위 화면에서 빨간 원을 두 박스 사이로 드래그 앤 드롭해 보세요. 원이 박스에 진입하면 배경색이 변하고, 박스를 벗어나는 순간 ondragleave 이벤트에 의해 배경색이 원래대로 돌아가며 "Passed out the dropzone"이라는 메시지가 표시되는 것을 확인할 수 있습니다.
정리
ondragleave 이벤트 속성은 드래그 앤 드롭 UI에서 드롭 존의 시각적 상태를 관리하는 핵심 요소입니다. ondragenter, ondragover, ondrop 이벤트와 함께 사용하면 파일 업로드 영역, 칸반 보드, 이미지 정렬 기능 등 다양한 인터랙티브 인터페이스를 손쉽게 구현할 수 있습니다.