[Javascript] file drag&drop 제어(dragenter, dragleave, dragover, drop)

안녕하세요🙏 개발자 재민콩입니다.

 

오늘은 drag&drop을 이용하여 파일을 제어하는 것에 대해 배워보겠습니다.

 

1. 영역 만들기

먼저 간단하게 HTML과 CSS를 사용하여 file drag&drop 영역을 만듭니다.

기본

활성화

 

2. dragenter, dragleave, dragover, drop event 추가

// jQuery 사용
$(document).on('dragenter', '.upload-box', function() {
  $(this).addClass('active');
});
$(document).on('dragleave', '.upload-box', function() {
  $(this).removeClass('active');
});
// dragover 이벤트가 추가돼야 drop 이벤트가 작동합니다.
$(document).on('dragover', '.upload-box', function(e) {;
  e.preventDefault();
  $(this).addClass('active');
});
// jQuery로 drop 이벤트를 추가하면 file을 잡을 수 없음
// $(document).on('drop', '.upload-box', function(e) {
//   e.preventDefault();
//   $(this).removeClass('active');

//   const files = [...e.dataTransfer.files];
//   console.log(files);
// });
document.querySelector('.upload-box').addEventListener('drop', function(e) {
  e.preventDefault();
  $(this).removeClass('active');

  const files = [...e.dataTransfer.files];
  console.log(files);
});