Drag and Drop
드래그 앤 드롭 (파일 입력 방식)
데스크톱이나 파일 관리자에서 웹 애플리케이션의 드롭 존으로 파일을 직접 드래그하여 선택하는 사용자 상호작용 패턴으로, 전통적인 파일 선택 대화 상자의 직관적인 대안을 제공합니다.
기술 세부사항
HTML5 드래그 앤 드롭 API는 대상 요소에서 dragenter, dragover, dragleave, drop 이벤트를 사용합니다. drop 이벤트의 dataTransfer.files 속성이 드롭된 파일의 FileList를 제공합니다. 디렉토리의 경우 DataTransferItem.webkitGetAsEntry() 메서드가 File and Directory Entries API를 통한 재귀적 읽기를 가능하게 합니다. dragover 동안의 CSS 시각적 피드백(테두리 강조, 오버레이 메시지)은 사용성에 매우 중요합니다. 이 API는 접근성을 위해 대체 수단과 함께 작동합니다.
예시
```javascript
// Drag and drop file handler
dropZone.addEventListener('drop', async (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files);
for (const file of files) {
console.log(`${file.name}: ${(file.size/1024).toFixed(1)} KB`);
const data = await file.arrayBuffer();
processFile(data);
}
});
```