파일 드래그하여 드랍시 이벤트 무시, preventDefault

Last Modified : 2016-05-03 / Created : 2016-05-03

8,284
View Count

주소 복사하기

자바스크립트를 사용해 파일을 드래그앤 드랍하여 서버에 전송하기 위한 입력폼을 만들어보자. 이를 위해서 특정 요소 위해 파일을 드래그 후 드랍해야하는데 나타날 문제는 다음과 같다.

# 드래그앤드랍시 브라우저 기본 이벤트 발생하여 페이지 전환됨
문제는 파일을 브라우저에 올릴 경우 브라우저가 가진 기본 이벤트가 실행되는데 있다. 정상적으로 구현하기 위해서는 이런 디폴트 이벤트를 제거하는 방법이 필요하다.

# 이벤트 제거하기 위한 함수 코드보기

// Prevent drag and drop event in window.addEventListener("dragover",function(e){
   e = e || event; 
   if (e.target.tagName != "INPUT") {
      // check which element is our target 
      e.preventDefault();
   }
},false);

window.addEventListener("drop",function(e){ 
   e = e || event; 
   if (e.target.tagName != "INPUT") {  
      // check which element is our target 
      e.preventDefault(); 
   }  
},false);