HTML5 DataTransfer 객체란?
HTML5에서 제공하는 드래그 앤 드롭(Drag and Drop) 기능은 웹 페이지 내에서 요소를 자유롭게 옮길 수 있게 해주는 강력한 인터페이스입니다. 이 과정의 핵심에는 DataTransfer 객체가 있습니다. DataTransfer 객체는 드래그 중인 데이터를 담고 전달하는 역할을 하며, 드래그 앤 드롭 작업 시 어떤 데이터가 이동하는지, 어떤 효과가 허용되는지 등을 관리합니다.
DataTransfer 객체에 접근하는 방법
모든 드래그 앤 드롭 이벤트(예: dragstart, dragenter, dragover, drop 등)의 이벤트 리스너 메서드는 Event 객체를 매개변수로 받습니다. 이 Event 객체에는 dataTransfer라는 읽기 전용(read-only) 속성이 포함되어 있으며, 이 속성을 통해 해당 이벤트와 연관된 DataTransfer 객체에 접근할 수 있습니다.
다음과 같이 event.dataTransfer를 사용하면 됩니다:
function EnterHandler(event) {
var dt = event.dataTransfer;
// dt 객체를 통해 드래그 데이터 조작 가능
}DataTransfer 객체 활용 예제
아래 예제 코드를 실행하면 보라색 상자(#boxA)를 마우스로 끌어다 놓는 실제 동작을 확인할 수 있습니다. dragStart 함수에서 DataTransfer 객체의 주요 메서드들을 활용하고 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
#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>
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>HTML5 드래그 앤 드롭 데모</h2>
<div>보라색 상자를 드래그해 보세요.</div>
<div id="boxA" draggable="true" ondragstart="return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id="boxB">Dustbin</div>
</center>
</body>
</html>주요 메서드 살펴보기
위 예제에서 사용된 DataTransfer 객체의 핵심 메서드와 속성은 다음과 같습니다.
1. setData(format, data)
드래그할 때 전송할 데이터를 설정합니다. 위 예제에서는 "Text" 형식으로 드래그 대상 요소의 id 값을 저장하여, 드롭 지점에서 어떤 요소가 이동했는지 식별할 수 있도록 합니다.
2. setDragImage(element, x, y)
드래그하는 동안 표시될 이미지를 지정합니다. 첫 번째 인수는 이미지로 사용할 요소, 두 번째와 세 번째 인수는 마우스 포인터 기준의 x, y 좌표 오프셋입니다. 위 예제에서는 드래그되는 요소 자체(ev.target)를 드래그 이미지로 사용합니다.
3. effectAllowed
허용되는 드래그 효과의 종류를 지정합니다. 'move', 'copy', 'link' 또는 이들의 조합을 설정할 수 있으며, 위 예제에서는 'move'(이동)만 허용하도록 설정했습니다.
정리
DataTransfer 객체는 HTML5 드래그 앤 드롭 API의 심장부라고 할 수 있습니다. event.dataTransfer를 통해 객체에 접근한 뒤, setData()로 데이터를 저장하고 getData()로 읽어오며, setDragImage()로 드래그 시각 효과를 제어할 수 있습니다. 파일 업로드, 목록 재정렬, 휴지통 기능 구현 등 다양한 인터랙티브 UI를 만들 때 반드시 알아두어야 할 핵심 개념이니 꼭 숙지하시기 바랍니다.