DataTransfer 객체란?
HTML5에서 도입된 드래그 앤 드롭(Drag & Drop) 기능의 중심에는 DataTransfer 객체가 있습니다. 이 객체는 드래그 작업 중 전송되는 데이터를 담고 있으며, 객체가 제공하는 다양한 속성과 메서드를 통해 데이터를 읽거나 새로 설정할 수 있습니다.
아래는 DataTransfer 객체에서 실무적으로 자주 사용되는 주요 속성과 메서드를 정리한 내용입니다.
DataTransfer 주요 속성 및 메서드
1. dataTransfer.dropEffect [ = value ]
- 현재 선택된 작업(연산)의 종류를 반환합니다.
- 값을 설정하여 선택된 작업을 변경할 수도 있습니다.
- 사용 가능한 값은 none, copy, link, move 네 가지입니다.
2. dataTransfer.effectAllowed [ = value ]
- 허용될 작업의 종류를 반환합니다.
- 값을 설정해 허용되는 작업의 범위를 변경할 수 있습니다.
- 사용 가능한 값은 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized입니다.
3. dataTransfer.types
dragstart 이벤트에서 설정된 데이터 형식(format) 목록을 DOMStringList 형태로 반환합니다. 드래그 중인 파일이 존재한다면 목록에 "Files" 문자열이 포함됩니다.
4. dataTransfer.clearData( [ format ] )
지정한 형식의 데이터를 제거합니다. 인자를 생략하면 저장된 모든 데이터가 삭제됩니다.
5. dataTransfer.setData(format, data)
지정한 형식으로 데이터를 추가합니다. 드래그 시작 시점에 전달할 데이터를 저장할 때 사용됩니다.
6. data = dataTransfer.getData(format)
지정한 형식의 데이터를 반환합니다. 해당 형식의 데이터가 없으면 빈 문자열("")을 반환합니다.
7. dataTransfer.files
드래그 중인 파일이 있을 경우, 해당 파일들을 담은 FileList 객체를 반환합니다. 파일 업로드 기능 구현 시 특히 유용합니다.
8. dataTransfer.setDragImage(element, x, y)
지정한 요소를 사용해 드래그 피드백(드래그 중 표시되는 시각적 이미지)을 업데이트합니다. 이전에 설정된 피드백이 있다면 새로운 것으로 대체됩니다.
9. dataTransfer.addElement(element)
드래그 피드백을 렌더링하는 데 사용할 요소 목록에 지정한 요소를 추가합니다.
마무리
DataTransfer 객체는 드래그 앤 드롭 인터페이스를 구현할 때 필수적인 요소입니다. setData와 getData 메서드를 조합하면 요소 간 데이터 전달을 손쉽게 처리할 수 있으며, dropEffect와 effectAllowed 속성을 함께 활용하면 복사, 이동, 링크 등 허용 동작을 세밀하게 제어할 수 있습니다.