HTML5 드래그 앤 드롭 API에서 ondragenter 속성은 드래그 중인 요소가 유효한 드롭(놓기) 대상 영역으로 진입하는 순간 지정된 스크립트를 실행합니다. 사용자가 어떤 요소를 끌어다가 특정 영역 위로 가져가는 바로 그 시점에 이벤트가 발생하므로, 하이라이트 표시나 안내 메시지 출력 등 다양한 상호작용을 구현할 수 있습니다.
ondragenter 속성의 기본 문법
드롭 대상이 되는 요소에 아래와 같이 ondragenter 속성을 추가하면, 해당 영역으로 드래그가 진입할 때마다 지정한 자바스크립트 함수가 호출됩니다.
<element ondragenter="script">
예제
다음 예제는 HTML5 드래그 앤 드롭의 기본 동작을 보여줍니다. 보라색 상자(boxA)를 마우스로 끌어 분홍색 상자(boxB) 위로 드래그해 보세요. 드래그가 시작되고 대상 영역에 진입할 때 각각의 이벤트 핸들러가 실행되는 것을 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type = "text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>코드 설명
- draggable="true": 해당 요소를 드래그할 수 있도록 설정합니다.
- ondragstart: 드래그가 시작되는 순간 dragStart() 함수를 호출합니다.
- ev.dataTransfer.setData(): 드래그되는 데이터(여기서는 요소의 id 값)를 전송 객체에 저장합니다.
- ev.dataTransfer.setDragImage(): 드래그 중 화면에 표시될 이미지를 지정합니다.
ondragenter 이벤트 활용 팁
위 예제에서 ondragenter 이벤트를 실제로 감지하려면 드롭 대상인 boxB에 핸들러를 추가하면 됩니다. 예를 들어 다음과 같이 작성할 수 있습니다.
<div id = "boxB" ondragenter = "this.style.border='3px dashed #000'">Dustbin</div>
이렇게 하면 드래그 중인 요소가 Dustbin 영역에 진입하는 순간 테두리가 점선으로 변경되어, 사용자에게 놓을 수 있는 영역임을 시각적으로 알려줄 수 있습니다. 필요에 따라 ondragleave(영역을 벗어날 때), ondrop(요소를 놓을 때) 이벤트와 함께 사용하면 완성도 높은 드래그 앤 드롭 인터페이스를 만들 수 있습니다.