바닐라 자바스크립트로 드래그 앤 드롭 UI 컴포넌트 구현하기 – 실전 사례 중심

 

 

웹 UI에서 사용자와의 상호작용을 자연스럽게 만드는 방법 중 하나가

바로 드래그 앤 드롭 인터페이스(Drag and Drop UI) 입니다.

 

파일 첨부, 리스트 정렬, 대시보드 구성 등 다양한 실무 사례에서 사용되는 이 기능은

사용자 경험(UX)을 크게 향상시킬 수 있습니다.

 

이 글에서는 바닐라 자바스크립트(Vanilla JavaScript)를 활용하여

다음 세 가지 실전 사례를 중심으로 드래그 앤 드롭 UI를 구현해 보겠습니다.

 

• ✅ Gmail 스타일의 파일 첨부 드롭존
• ✅ TODO 앱에서 할 일 순서 변경 기능
• ✅ 대시보드 위젯 위치 이동 UI

 

📂 1. 파일 첨부 드롭존 UI – Gmail 스타일 구현

 

드래그 앤 드롭 방식으로 파일을 첨부할 수 있는 UI는

이메일, 게시판, 관리자 페이지 등에서 많이 사용됩니다.

 

🔧 주요 기능

• dragenter, dragover, drop 이벤트를 활용한 드롭존 구현
• 업로드된 파일 목록 실시간 시각화
• 파일 형식 필터링 및 이미지 미리보기

 

💡 UX 강화 팁

• 사용자가 파일을 드롭할 때 배경색 변경 등 시각적 피드백 제공
• DataTransfer.items를 활용해 폴더 드래그 방지 처리

 

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = [...e.dataTransfer.files];
  renderFileList(files);
});

 

🔃 2. 리스트 정렬 기능 – TODO 리스트 항목 순서 변경

 

드래그를 통해 할 일 목록의 순서를 변경할 수 있다면

사용자는 더욱 직관적으로 리스트를 조작할 수 있습니다.

 

🔧 주요 기능

• 각 항목에 draggable="true" 속성 부여
• dragstart, dragover, drop 이벤트로 DOM 요소 추적 및 정렬
• insertBefore 메서드를 활용해 리스트 순서 변경

 

💡 UX 강화 팁

• 드래그 중인 항목에 dragging 클래스 추가하여 스타일 강화
• 드롭 위치에 시각적 힌트(placeholder DOM) 추가

 

list.addEventListener('drop', (e) => {
  const dragged = document.querySelector('.dragging');
  const target = e.target.closest('li');
  list.insertBefore(dragged, target);
});

 

📦 3. 대시보드 위젯 이동 – 박스 기반 드래그 구현

 

HTML Drag API 외에도 mousedown, mousemove, mouseup를 활용한

커스텀 방식의 드래그 UI도 가능합니다.

특히 대시보드의 카드나 위젯 배치를 자유롭게 조정할 때 유용합니다.

 

🔧 주요 기능

• 커스텀 이벤트 체인으로 위치 제어
• position: absolute와 left/top 속성 변경을 통한 이동
• 커서 스타일 변경 및 경계선 힌트 추가 가능

 

document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    box.style.left = `${e.pageX - offsetX}px`;
    box.style.top = `${e.pageY - offsetY}px`;
  }
});

 

📌 반응형 & 접근성 고려

• 모바일 대응을 위해 touchstart, touchmove 이벤트도 병행 처리
• 키보드 탐색 가능한 구조와 시각적 피드백을 통해 접근성 강화
• 상태 저장을 위해 localStorage와 연동하여 UX 지속성 확보

 

🏁 결론

 

드래그 앤 드롭 UI는 사용자 인터랙션을 강화하면서도

UX를 매끄럽게 만들 수 있는 중요한 기능입니다.

라이브러리에 의존하지 않고 순수 자바스크립트로 구현한다면

재사용성과 확장성까지 확보할 수 있습니다.

 

이 글의 사례들을 활용해

여러분의 프로젝트에도

자연스러운 드래그 앤 드롭 UI를 적용해 보세요.