HTML Academy · 강의

draggable 속성 및 dragstart 이벤트

요소를 드래그할 수 있게 만들고 dragstart에 대응하기

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

드래그 가능 속성

어떤 요소든 draggable="true"를 설정하면 드래그 원본이 됩니다. 링크와 이미지는 기본적으로 드래그할 수 있지만, 그 밖의 요소(분할 영역, 목록 항목, 인라인 요소)에는 명시적 속성이 필요합니다. draggable="false"를 설정하면 요소가 기본 드래그에서 제외됩니다.

<div draggable="true" id="card">Drag me</div>

드래그 시작 이벤트

사용자가 드래그를 시작하면 원본 요소에서 드래그 시작 이벤트가 발생합니다. 이때 드래그를 초기화합니다. 어떤 항목이 이동 중인지 기록하고, 필요하면 항목의 스타일을 지정하며, 드롭 대상이 읽을 데이터를 dataTransfer 객체에 기록합니다.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

드래그 시작 이벤트가 없으면 아무 일도 일어나지 않습니다

요소를 드래그 가능으로 표시했지만 드래그 시작 이벤트를 전혀 처리하지 않으면, 브라우저는 여전히 유령 이미지를 드래그합니다. 그러나 데이터가 설정되지 않으므로 대부분의 드롭 대상은 드롭을 거부합니다. 드래그 가능 속성에는 최소한 식별자를 저장하는 드래그 시작 이벤트 처리기를 항상 함께 사용하십시오.

effectAllowed 설정

e.dataTransfer.effectAllowed = "move"를 드래그 시작 이벤트에서 설정하면 작업을 제한할 수 있습니다. 가능한 값은 "복사", "이동", "링크", "copyMove", "모두" 또는 "없음"입니다. 이 설정에 따라 브라우저가 표시하는 커서와 나중에 대상이 설정할 수 있는 dropEffect가 결정됩니다.

시각적 신호 추가

원본에 CSS 클래스를 추가하여 드래그하는 동안 흐리게 표시하십시오. 예를 들어 card.classList.add("dragging")을 사용할 수 있습니다. dragend 이벤트에서 클래스를 삭제하면 드롭이 성공했든 Escape로 취소되었든 스타일이 제거됩니다.

사용자 지정 드래그 이미지

기본적으로 브라우저는 원본의 반투명한 스냅숏을 드래그합니다. e.dataTransfer.setDragImage(node, offsetX, offsetY)로 이를 재정의할 수 있습니다. 숨겨진 DOM 요소나 이미지를 전달하면 커서 위치에 사용자 지정 미리 보기가 표시됩니다.

const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

드래그 종료 이벤트

dragend는 드래그가 성공적으로 드롭되었는지, 유효하지 않은 대상에 드롭되었는지 또는 취소되었는지와 관계없이 드래그가 끝난 후 원본에서 발생합니다. 드래그 중 클래스를 제거하고, 유령 미리 보기를 숨기며, 불투명도를 복원하는 등의 정리 작업에 사용하십시오.

취소 감지

드래그 종료 처리 안에서 e.dataTransfer.dropEffect를 확인하십시오. 값이 "없음"이면 드롭이 발생하지 않은 것입니다(대상이 거부했거나, 사용자가 Escape를 눌렀거나, 페이지 바깥에 드롭한 경우). 그렇지 않으면 드롭 대상이 선택한 작업("이동", "복사", "링크")과 같습니다.

터치 장치에서의 드래그

네이티브 드래그 앤 드롭은 데스크톱 중심으로 설계되었습니다. 터치 장치에서는 폴리필이나 포인터 이벤트 기반 대체 구현 없이는 API가 거의 작동하지 않습니다. 모바일 친화적인 순서 변경 사용자 인터페이스에는 두 이벤트 모델을 추상화하는 SortableJS나 dnd-kit 같은 라이브러리를 사용하는 것이 좋습니다.

접근성 문제

네이티브 드래그 앤 드롭은 키보드로 사용할 수 없으므로 키보드만 사용하는 사용자는 항목 순서를 변경할 수 없습니다. 항상 대안을 제공하십시오. 예를 들면 화살표 키 처리기, 위로 이동 및 아래로 이동 버튼 또는 접근성 속성으로 제어되는 순서 변경 대화상자를 사용할 수 있습니다. 드래그 앤 드롭은 기능을 보완해야지 대체해서는 안 됩니다.

브라우저 기본 동작 비활성화

드래그 가능한 요소 내부의 텍스트 선택은 드래그를 방해할 수 있습니다. 원본에 CSS user-select: none 및 -webkit-user-drag: element를 적용하면 브라우저가 내부 텍스트를 선택하는 대신 요소를 드래그합니다.

지식 확인

draggable="true" 속성만으로도 요소를 드래그할 수 있는데, 왜 일반적으로 드래그 시작 이벤트 처리기를 추가해야 합니까?

요약

원본을 드래그 가능으로 표시하고 드래그 시작 이벤트를 사용하여 dataTransfer를 채우고 effectAllowed와 선택적 사용자 지정 드래그 이미지를 설정하십시오. 드래그 종료 이벤트를 함께 사용하여 스타일을 정리하십시오. 접근성을 위해 키보드 대안을 제공하고 터치 장치에는 폴리필을 고려하십시오.

자주 묻는 질문

“draggable 속성 및 dragstart 이벤트” 강의는 무료인가요?

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

“draggable 속성 및 dragstart 이벤트”에서 뭘 배우나요?

요소를 드래그할 수 있게 만들고 dragstart에 대응하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“draggable 속성 및 dragstart 이벤트” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기