HTML5의 Drag and Drop 기능의 초간단 개념 이해와 사용설명

최근 파일을 드래그해서 드롭하면 업로드가 되는 기능을 구현할 기회가 생겨서

HTML5의 Drag and Drop을 이용하여 파일 업로드를 개발해 보았다.

개발중 가장 핵심적인 사항만 정리하니 참고하실분은 참고하시길~!

참고로 난 Vuejs로 개발했고 어느 자바스크립트 라이브러리든  개념만 알면 쉽다.

사용설명 시작!!

1. 파일을 드래그해서 드롭하고 싶은 장소를 만들거나 지정한뒤 drop가 발생하니 drop 이벤트를 듣도록 해놓는다.

prevent를 붙인 이유는 기본  drop 기능을 방지하기 위해!

<div @drop.prevent="dropFile" @dragover.prevent>
  ...
</div>

2. 난 dropFile이라는 메소드를 실행하라고 해놓았다.  dropFile 메소드는 아래와 같고 핵심은 

e.dataTransfer.files 안에 내가 드래그한 File객체가 들어있다는 것!! 이 File 객체만 있으면 정보를 얻든 서버에 업로드를 하든

개발자 마음대로 할 수 있다.ㅏ

dropFile(e) {
  let droppedFiles = e.dataTransfer.files;
  if (!droppedFiles) return;  
  ...
}

엄첨 쉽지 않은가? 드래그앤 드롭 기능이 이렇게 편리하게 HTML5에는 구현되어 있으니

당황하지 말고 File객체를 찾아 이용해보자~!