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


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


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


// 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);

이 코드는 윈도우 객체에 드랍 또는 드래그 이벤트로 인해 브라우저 디폴트 이벤트가 발생할 경우 이에 대한 이벤트를 막을 수 있는 preventDefault()를 수행하도록 만드는 함수이다.

# 왜 preventDefault()를 사용하는가

파일첨부의 경우 input 태그의 type 속성을 사용해 파일의 위치 값을 가져와 서버에 올릴 수 있으나 파일을 올리는 방법이 불편하므로 최근에는 드래그하여 드랍하는 방식의 인터페이스를 구현하는 웹페이지가 많다. 이 경우에 발생되면 안되는 이벤트를 제거하기 위함이다.