Drag and Drop img

Drag and Drop 을 사용하려면 하나의 태그만 있으면 가능하다.

 

이런식으로 구색만 갖춰주면

이런식이 된다.

 

 

$("#input-img").on("dragover", dragOver).on("dragleave", dragOver).on("drop", uploadFiles); 이부분은

"dragover" 부분은 드래그가 올려졌을 때 dragOver함수를 샐행한다는 뜻이고

"dragleave" 부분은 드래그가 멀어졌을 때 dragOver함수를 시랭한다는 뜻이다.

"drop" 부분은 드래그를 해온다음 마우스를 놓았을 때 uploadFiles 함수를 실행한다는 뜻이다.

 

dragOver 함수의 if문은 dragover일 때와 dragleave일 때 약간의 변화를 주기 위해 설정해 놓은것이다.

 

uploadFiles 함수의 e.dataTransfer=e.originalEvent.dataTransfer;

 

 

이 부분은 dataTransfer가 가끔 undefined가 나올 때가 있어서 임의로 정해준다는 뜻이라는데 정확히 무슨 의미인지 파악하지 못했다. 

그 아래의 if(files.length>1)의 부분은 두 개 이상 담지 못하게 return해주는 부분이고,

그 아래의 if문은 화면에 image파일 검사를 해서 image파일만 보일 수 있고 url을 정해주는 부분이다.

 

출처 : https://kutar37.tistory.com/entry/HTML5-Javasciprt-DragDrop-%EA%B5%AC%ED%98%84-%EC%98%88%EC%A0%9C

HTML5 & Javasciprt : Drag&Drop 구현 (예제)

 

 

DataTransfer 객체

드래그 앤 드롭 이벤트를 위한 모든 이벤트 리스너 메소드(event listener method)는 DataTransfer 객체를 반환합니다.

이렇게 반환된 DataTransfer 객체는 드래그 앤 드롭 동작에 관한 정보를 가지고 있게 됩니다.

 

출처 : http://tcpschool.com/html/html5_api_dragAndDrop

코딩교육 티씨피스쿨