HTML에서 드래그 작업이 시작되는 순간 특정 스크립트를 실행하고 싶다면 ondragstart 속성을 사용하면 됩니다. 이 속성은 사용자가 요소를 드래그하기 시작할 때 트리거되며, 주로 dataTransfer 객체에 드래그할 데이터를 설정하는 데 활용됩니다.
ondragstart 속성의 기본 개념
ondragstart는 HTML5 드래그 앤 드롭(Drag & Drop) API의 핵심 이벤트 중 하나로, draggable="true"로 설정된 요소에서만 동작합니다. 드래그가 시작될 때 실행할 자바스크립트 함수를 지정하며, 일반적으로 다음과 같은 용도로 사용됩니다.
- 드래그되는 요소의 ID나 데이터를
event.dataTransfer.setData()로 저장 - 드래그 상태에 따른 UI 피드백 표시
- 드래그 가능 여부에 대한 조건 처리
예제 코드
아래 예제는 두 개의 박스 사이에서 요소를 자유롭게 드래그 앤 드롭할 수 있는 기능을 구현한 코드입니다. ondragstart, ondrag, ondrop, ondragover 이벤트가 함께 사용되었습니다.
<!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>왼쪽 박스를 오른쪽으로 드래그하거나, 오른쪽 박스를 왼쪽으로 드래그해 보세요.</p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function draggingNow(event) {
document.getElementById("box").innerHTML = "드래그 중입니다!";
}
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 = "요소가 성공적으로 드롭되었습니다!";
}
</script>
</body>
</html>코드 설명
1. dragStart 함수 – 드래그 시작 처리
dragStart(event) 함수는 ondragstart 이벤트 발생 시 호출됩니다. event.dataTransfer.setData("Text", event.target.id)를 통해 드래그 중인 요소의 ID를 데이터 형식으로 저장하여, 나중에 드롭 시 어떤 요소가 이동되었는지 식별할 수 있게 합니다.
2. draggingNow 함수 – 드래그 진행 상태 표시
요소가 실제로 드래그되는 동안 draggingNow(event)가 반복 호출되며, 화면 하단의 상태 영역에 진행 상황을 표시합니다.
3. dropNow와 drop 함수 – 드롭 처리
dropNow(event)는 기본 동작(드롭 방지)을 막기 위해 preventDefault()를 호출하며, drop(event)는 저장된 데이터를 가져와 해당 요소를 새 위치로 이동시키고 성공 메시지를 출력합니다.
주요 브라우저 지원 현황
ondragstart 속성은 Chrome, Edge, Firefox, Safari 등 대부분의 최신 브라우저에서 지원됩니다. 단, 모바일 환경에서는 드래그 앤 드롭 API 지원이 제한적일 수 있으므로 터치 이벤트와 함께 구현하는 것이 좋습니다.