HTML ondragenter 이벤트 속성은 드래그 가능한 요소나 텍스트가 문서 내 유효한 드롭 대상(drop target) 영역에 진입하는 순간 실행되는 이벤트 핸들러입니다. 주로 드래그 앤 드롭(Drag & Drop) 인터페이스에서 사용자가 요소를 특정 영역 위로 가져올 때 배경색 변경 등 시각적 피드백을 제공하는 데 활용됩니다.
문법(Syntax)
ondragenter 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname ondragenter=”script”></tagname>
여기서 script 부분에는 해당 이벤트가 발생했을 때 실행할 JavaScript 코드를 작성합니다.
예제(Example)
다음은 HTML ondragenter 이벤트 속성을 활용한 실전 예제입니다. 빨간 원을 두 개의 박스 사이로 드래그하면, 각 박스에 진입하거나 벗어날 때 배경색이 변하고 안내 메시지가 함께 표시됩니다.
<!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 ondragenter 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>
출력 결과(Output)
코드를 실행하면 위와 같이 두 개의 드롭 영역이 나타납니다. 이제 빨간 원을 두 박스 사이로 드래그 앤 드롭해 보면서 ondragenter 이벤트 속성이 어떻게 동작하는지 직접 확인해 보세요.
주요 함수 동작 방식
- dragStart() : 드래그가 시작되면 요소의 id 값을 dataTransfer 객체에 저장합니다.
- dragEnter() : 드래그 중인 요소가 드롭 영역에 진입하면 배경색을 반투명 붉은색으로 변경하고 안내 메시지를 출력합니다.
- dragLeave() : 드래그 중인 요소가 드롭 영역을 벗어나면 배경색을 투명하게 되돌립니다.
- allowDrop() : 기본 동작을 차단(preventDefault)하여 해당 영역에 요소를 드롭할 수 있도록 허용합니다.
- drop() : 드롭이 완료되면 저장된 데이터를 기반으로 드래그된 요소를 해당 영역으로 이동시킵니다.
이처럼 ondragenter는 ondragstart, ondragover, ondragleave, ondrop 등 다른 드래그 관련 이벤트 속성들과 함께 사용하면 더욱 직관적인 드래그 앤 드롭 사용자 경험을 구현할 수 있습니다.