[책] 자바스크립트 코드 레시피 278 - 116일차

드래그 앤 드롭 기능 사용하기

• 드래그 앤 드롭 기능을 사용해 파일을 처리하고 싶을 때

실습

다양하게 응용해보고 습득합니다.

드래그 이벤트 정보
event.dataTransfer.files

---

드래그 완료 후 요소에서 발생하는 이벤트
dragenter
dragover
dragleave
drop

const box = document.querySelector('.box');
box.addEventListener('dragenter', () => {
  console.log('dragenter 이벤트');
});
box.addEventListener('dragover', () => {
  console.log('dragover 이벤트');
});
box.addEventListener('dragleave', () => {
  console.log('dragleave 이벤트');
});

---

드래그 요소에서 발생하는 이벤트
dragstart
drag
dragend

const circle = document.querySelector('.circle');
circle.addEventListener('dragstart', () => {
  console.log('dragstart 이벤트');
});
circle.addEventListener('drag', () => {
  console.log('drag 이벤트');
});
circle.addEventListener('dragend', () => {
  console.log('dragend 이벤트');
});