ondrag 이벤트란?
JavaScript에서 요소를 드래그하려면 ondrag 이벤트를 사용합니다. ondrag 이벤트는 요소가 드래그되고 있는 동안 계속해서 발생(trigger)하는 이벤트입니다.
HTML5의 드래그 앤 드롭(Drag & Drop) API에서는 ondrag 외에도 여러 관련 이벤트가 함께 사용됩니다. 주요 이벤트는 다음과 같습니다.
- ondragstart — 드래그가 시작되는 순간 발생합니다.
- ondrag — 요소가 드래그되는 동안 지속적으로 발생합니다.
- ondragover — 드래그 중인 요소가 유효한 드롭 대상 위에 있을 때 발생합니다.
- ondrop — 드래그한 요소가 드롭 대상 위에 놓이는 순간 발생합니다.
드롭 기능을 정상적으로 사용하려면 ondragover와 ondrop 핸들러에서 반드시 event.preventDefault()를 호출해야 한다는 점도 기억하세요. 그렇지 않으면 브라우저의 기본 동작 때문에 드롭이 차단됩니다.
예제
아래 코드를 실행하면 JavaScript에서 ondrag 이벤트를 실제로 어떻게 활용하는지 확인할 수 있습니다. 왼쪽 상자를 오른쪽으로 드래그하거나, 반대로 오른쪽 상자를 왼쪽으로 드래그해 보세요.
<!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)" ondrag = "draggingNow(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 draggingNow(event) {
document.getElementById("box").innerHTML = "Dragged successfully!";
}
function dropNow(event) {
event.preventDefault();
}
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>