HTML Academy · 강의

dragover 및 drop 이벤트

유효한 드롭 대상 정의하고 drop 이벤트 처리하기

dragover 및 drop 이벤트은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

드롭 대상에는 두 가지 처리기가 필요합니다

드롭 대상은 드롭을 허용하는 드래그 중 이벤트와 데이터를 받는 놓기 이벤트를 모두 처리해야 합니다. 드래그 중 이벤트가 없으면 브라우저의 기본 동작이 "어떤 요소도 드롭 대상이 아님"이므로 놓기 이벤트를 발생시키지 않습니다.

preventDefault는 필수입니다

드래그 중 처리기에서 e.preventDefault()를 호출해야 합니다. 이렇게 하면 드롭을 거부하는 브라우저의 기본 동작이 취소됩니다. 이를 호출하지 않으면 커서는 계속 "허용되지 않음"으로 표시되고, 사용자가 무엇을 하든 놓기 이벤트가 발생하지 않습니다.

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
});
zone.addEventListener("drop", (e) => {
  e.preventDefault();
  console.log(e.dataTransfer.getData("text/plain"));
});

드래그 진입 및 이탈 이벤트

커서가 대상에 들어갈 때 드래그 진입 이벤트가 한 번 발생하고, 대상에서 나갈 때 드래그 이탈 이벤트가 한 번 발생합니다. 이를 사용하여 시각적인 "드래그 중" 강조 표시를 전환하십시오. 진입할 때 클래스를 추가하고 이탈할 때 제거하면 사용자가 어느 영역이 드롭을 받을지 알 수 있습니다.

자식 요소에서도 드래그 이탈이 발생합니다

미묘한 특성이 있습니다. 커서를 자식 요소 위로 이동하면 부모에서 드래그 이탈 이벤트가 발생한 다음 자식에서 드래그 진입 이벤트가 발생합니다. 드래그 진입에서 증가시키고 드래그 이탈에서 감소시키는 counter를 사용하십시오. counter가 0으로 돌아올 때만 강조 표시를 제거하면 됩니다.

let counter = 0;
zone.addEventListener("dragenter", () => {
  counter++;
  zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
  counter--;
  if (counter === 0) zone.classList.remove("over");
});

dropEffect 설정

드래그 중 처리기 안에서 e.dataTransfer.dropEffect = "move" 또는 "copy", "link", "none"을 설정하여 커서를 제어하고 원본에 수행될 작업을 알리십시오. 작업은 원본의 effectAllowed와 호환되어야 하며, 그렇지 않으면 드롭이 거부됩니다.

놓을 때 데이터 읽기

놓기 처리기에서 setData에 사용한 것과 같은 MIME 유형을 지정하여 e.dataTransfer.getData(format)를 호출하십시오(일반적으로 "text/plain"을 사용합니다). 그런 다음 식별자로 요소를 찾고, 대상에 추가하고, 데이터 모델을 업데이트하거나 애플리케이션에 필요한 작업을 수행하십시오.

놓을 때 기본 동작 방지

놓기 처리기에서도 e.preventDefault()가 필요합니다. 이를 호출하지 않으면 브라우저는 기본 동작으로 되돌아갑니다. URL을 드롭한 경우에는 링크로 이동하므로 페이지 상태가 즉시 사라집니다.

데스크톱에서 드롭하기

브라우저는 OS에서 드래그한 파일을 e.dataTransfer.files가 채워진 놓기 이벤트로 변환합니다. FileList를 순회하고 파일 API로 각 파일을 읽어 이미지 업로드, log 파일 뷰어 또는 문서 가져오기 도구를 지원할 수 있습니다.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  for (const file of e.dataTransfer.files) {
    console.log(file.name, file.size);
  }
});

dataTransfer의 여러 유형

setData는 동일한 페이로드를 여러 MIME 유형으로 저장할 수 있습니다. "text/plain"은 대체용으로, "text/uri-list"는 URL용으로, "application/json"은 구조화된 페이로드용으로 사용합니다. 드롭 대상은 getData를 통해 이해할 수 있는 가장 풍부한 유형을 선택합니다.

터치 이벤트와 조정하기

모바일 브라우저는 터치 동작으로부터 드래그 중 및 놓기 이벤트를 자동으로 만들어 내지 않습니다. 통합된 사용자 경험을 제공하려면 포인터 이벤트와 수동 적중 판정을 사용하거나 차이를 추상화하는 라이브러리를 사용하십시오. 네이티브 HTML5 드래그 앤 드롭은 데스크톱 전용으로 취급하는 것이 좋습니다.

성능 팁

드래그 중 이벤트는 커서가 움직이는 동안 계속 발생하며, 초당 수십 번 발생하는 경우도 많습니다. 처리기를 가볍게 유지하십시오. 처리기 안에서 비용이 큰 DOM 쿼리나 레이아웃 읽기를 피하십시오. 드래그 진입 시 사각형을 캐시하고 커서가 대상 위에 있는 동안 재사용하십시오.

지식 확인

드래그 중 처리기에서 e.preventDefault()를 호출하기 전에는 대상에서 놓기 이벤트가 절대 발생하지 않는 이유는 무엇입니까?

요약

제대로 작동하는 드롭 대상은 드래그 중 이벤트(항상 preventDefault를 호출하고, 선택적으로 dropEffect를 설정)와 놓기 이벤트(다시 preventDefault를 호출한 다음 dataTransfer.getData 또는 dataTransfer.files를 읽음)를 수신합니다. 강조 표시에는 드래그 진입 및 이탈 이벤트와 counter를 함께 사용하고, 드래그 중 이벤트가 매우 자주 발생하므로 처리기를 가볍게 유지하십시오.

자주 묻는 질문

“dragover 및 drop 이벤트” 강의는 무료인가요?

네 — “dragover 및 drop 이벤트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“dragover 및 drop 이벤트”에서 뭘 배우나요?

유효한 드롭 대상 정의하고 drop 이벤트 처리하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“dragover 및 drop 이벤트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기