dataTransfer 객체
드래그 원본과 드롭 대상 사이에서 데이터 전송하기
dataTransfer 객체은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
dataTransfer에 저장되는 데이터
dataTransfer 객체는 모든 드래그 이벤트에 연결되며 원본과 대상 사이의 유일한 통신 채널입니다. 이 객체에는 페이로드 데이터, 파일 목록, 허용된 작업 및 선택된 드롭 작업이 담깁니다.
setData와 getData
원본은 e.dataTransfer.setData(format, value)를 사용하여 유형이 지정된 페이로드를 기록합니다. 대상은 e.dataTransfer.getData(format)로 이를 읽습니다. 두 인수는 모두 문자열이며, 저장하기 전에 값이 문자열로 변환됩니다.
src.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", "hello");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));
});여러 MIME 유형
동일한 페이로드를 여러 유형으로 저장하면 드래그를 서로 다른 프로그램에서 사용할 수 있습니다. "text/plain"은 모든 텍스트 편집기에서 작동하고, "text/uri-list"는 브라우저에서 URL로 인식되며, "text/html"은 워드 프로세서에서 서식을 유지합니다. 대상은 자신이 이해하는 유형을 선택합니다.
드롭 외부에서의 읽기 제한
개인 정보 보호를 위해 브라우저는 드래그 진입 및 드래그 중 처리기에 e.dataTransfer.types를 통해 유형 목록만 노출하고 값은 노출하지 않습니다. 실제 데이터는 드롭을 허용한 대상의 놓기 이벤트 안에서만 읽을 수 있습니다.
파일 목록
사용자가 데스크톱에서 드래그하면 e.dataTransfer.files는 File 객체로 이루어진 FileList가 됩니다. 페이지 내부에서 시작된 드래그에서는 비어 있습니다. 이를 외부 파일 드롭을 감지하고 크기, 이름 및 유형에 접근하는 표준 방법으로 사용하십시오.
항목 컬렉션
e.dataTransfer.items는 문자열과 파일을 모두 DataTransferItem 객체로 노출합니다. 각 항목에는 kind("string" 또는 "file"), type(MIME) 및 getAsString(cb) / getAsFile()가 있습니다. 항목 컬렉션은 files와 getData를 함께 사용하는 방식의 현대적이고 유형을 인식하는 대안입니다.
for (const item of e.dataTransfer.items) {
if (item.kind === "file") {
const file = item.getAsFile();
console.log(file.name);
} else {
item.getAsString((s) => console.log(item.type, s));
}
}effectAllowed와 dropEffect 비교
effectAllowed는 드래그 시작 이벤트에서 원본이 설정하며, 원본이 지원하는 작업을 나열합니다. dropEffect는 드래그 중 이벤트에서 대상이 설정하며, 그중 하나의 작업을 선택합니다. 두 설정이 일치하지 않으면 브라우저가 드롭을 취소합니다.
사용자 지정 드래그 이미지
e.dataTransfer.setDragImage(node, x, y)는 기본 유령 이미지를 대체합니다. 원하는 대로 스타일을 지정한 화면 밖의 DOM 요소와 해당 요소를 기준으로 한 커서의 오프셋을 전달하십시오. 변경 사항은 현재 드래그에만 적용됩니다.
clearData
e.dataTransfer.clearData()는 모든 형식을 삭제하고, clearData("text/plain")은 하나의 형식만 제거합니다. 드래그마다 dataTransfer가 새로 생성되므로 거의 필요하지 않지만, 데이터 입력을 시작한 후 취소하기로 결정했을 때 유용합니다.
교차 출처 동작
출처 A의 페이지에서 출처 B의 페이지로 드래그한 파일도 계속 전달되므로 이 API는 출처 간에 작동합니다. 그러나 수신 페이지에는 원본이 dataTransfer에 명시적으로 넣은 내용만 표시되며, 임의의 DOM 접근 권한은 부여되지 않습니다.
브라우저에서 데스크톱으로 드래그하기
페이지에서 "DownloadURL" 유형을 기록하면(setData("DownloadURL", "image/png:filename.png:https://...")) 사용자가 브라우저 밖의 데스크톱으로 파일을 드래그할 수 있습니다. 브라우저 지원은 제한적이므로(Chromium 기반 브라우저) 지원 여부를 감지하고 적절한 대체 방식으로 처리하십시오.
지식 확인
dragover 이벤트가 진행되는 동안 dataTransfer.getData()가 실제로 저장된 값을 반환하도록 허용되지 않는 이유는 무엇인가요?
요약
dataTransfer는 드래그 소스와 드롭 대상 사이를 연결하는 다리입니다. 유형이 지정된 문자열 데이터에는 setData/getData를, 파일과 문자열을 통합해서 보는 데에는 items를, 데스크톱에서 드롭된 파일에는 files를, 사용자 지정 미리 보기에는 setDragImage를 사용하고, 작업을 조율하려면 effectAllowed/dropEffect를 사용합니다.
자주 묻는 질문
“dataTransfer 객체” 강의는 무료인가요?
네 — “dataTransfer 객체” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“dataTransfer 객체”에서 뭘 배우나요?
드래그 원본과 드롭 대상 사이에서 데이터 전송하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“dataTransfer 객체” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.