#TIL 28일차(Drag & Drop)

Drag & Drop 이벤트란?

사용자가 마우스를 이용해 화면 상의 요소를 끌어다 놓는 상호작용을 처리하는 이벤트

Drag & Drop 이벤트 종류

dragstart: 사용자가 드래그할 요소를 클릭하고 마우스 버튼을 누른 상태에서 움직이기 시작할 때 발생
drag: 요소가 드래그되는 동안 지속적으로 발생
dragenter: 드래그된 요소가 드롭 대상 요소의 경계 안으로 들어올 때 발생
dragover: 드래그된 요소가 드롭 대상 요소 위에 있을 때 발생
⭐️ 이 이벤트는 기본적으로 드롭을 허용하지 않으므로, 'event.preventDefault()'을 호출해 드롭을 허용해야함
drop: 드래그된 요소가 드롭 대상 요소 위에 놓일 때 발생. 이 이벤트에서 드롭된 데이터를 처리할 수 있음.
dragleave: 드래그된 요소가 드롭 대상 요소의 경계 밖으로(대상 객체의 위에서) 나갈 때 발생
dragend: 드래그가 끝났을 때 발생 = 사용자가 마우스 버튼을 놓을 때 발생

⭐️ drop, dragover 이벤트는 필수로 사용해야 하는 이벤트 ⭐️
→ dragover 이벤트를 적용하지 않으면 drop 이벤트가 작동하지 않음❗️❗️

예시 코드

이번에 프로젝트에서 맡은 페이지 중 하나가 게시물 작성페이지였는데, 사진 첨부 부분에서 사진을 드래그하여 업로드 하는 것도 가능하게 하고 싶었다. 어떻게 사용했는지 적어보도록 하겠다.

사용한 이벤트: "dragover"
역할: 드래그 중인 파일이 업로드 영역 위를 지나갈 때 발생. 이 이벤트를 통해 기본 동작을 방지하고, 드롭을 허용함

const handleDragOver = (event) => {
  event.preventDefault(); // 기본 동작 방지
  // onDragOver 콜백이 존재하면 호출
  if (onDragOver) {
    onDragOver(event);
  }
};

사용한 이벤트: "drop"
역할: 드래그된 파일이 업로드 영역에 드롭될 때 발생. 이 이벤트를 통해 기본 동작을 방지하고, 드롭된 파일을 배열로 변환하여 처리

const handleDrop = (event) => {
  event.preventDefault(); // 기본 동작 방지
  // 드롭된 파일을 배열로 변환
  const files = Array.from(event.dataTransfer.files);
  // onDrop 콜백이 존재하면 호출
  if (onDrop) {
    onDrop(files);
  }
};

🖥️ 결과물

이렇게 하면 아래와 같이 해당 박스를 클릭하여 사진을 업로드하거나, 드래그하여 업로드할 수 있다❗️