JavaScript에서 요소 드래그가 시작될 때 발생하는 이벤트는 무엇인가요?

ondragstart 이벤트란?

HTML5의 ondragstart 이벤트는 사용자가 요소를 드래그하기 시작하는 순간 발생합니다. 이 이벤트는 주로 draggable="true" 속성이 설정된 요소에 적용되며, 드래그 앤 드롭(Drag & Drop) 기능을 구현할 때 가장 먼저 호출되는 핵심 이벤트입니다.

드래그가 시작될 때 일반적으로 event.dataTransfer.setData() 메서드를 사용해 드래그 중인 데이터를 저장하고, 이후 드롭(dragover → drop) 단계에서 해당 데이터를 가져와 활용하게 됩니다.

아래 예제 코드를 직접 실행하면서 ondragstart 이벤트의 구현 방법을 확인해 보세요.

예제 코드

<!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)" ondragend = "dragEnd(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 dropNow(event) {
            event.preventDefault();
         }
         function dragEnd(event) {
            document.getElementById("box").innerHTML = "Dragging ends!";
         }
         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>

코드 설명

dragStart(event): 드래그가 시작되면 dataTransfer.setData()로 대상 요소의 ID를 저장합니다.
dropNow(event): ondragover 이벤트에서 기본 동작을 막아(preventDefault()) 드롭이 가능하도록 허용합니다.
drop(event): 저장된 데이터를 getData()로 가져온 뒤, 해당 요소를 드롭 영역으로 이동시킵니다.
dragEnd(event): 드래그 작업이 끝나면 결과 메시지를 화면에 표시합니다.

이처럼 ondragstart 이벤트는 드래그 앤 드롭 인터랙션의 출발점 역할을 하며, 파일 업로드 UI, 목록 정렬, 칸반 보드 등 다양한 웹 기능에서 활용됩니다.