81. 드래그 앤 드롭 상호작용

드래그 앤 드롭 상호작용

드래그 앤 드롭의 전체 상태와 인터랙션을 시각화합니다

인터랙션 상태 단계

대기 상태 (Idle)

• 드래그 가능 요소 표시
• 핸들 아이콘으로 affordance
• 커서: grab

드래그 시작

• 마우스 다운/터치 시작
• 고스트 이미지 생성
• 원본 dim 또는 placeholder
• 커서: grabbing

드래그 중

• 고스트가 커서 따라감
• 유효한 드롭존 하이라이트
• 무효 영역 제한 표시
• 엣지에서 스크롤 트리거

드롭존 위 (Over)

• 드롭존 하이라이트 강화
• 드롭 위치 표시
• 스냅 프리뷰
• 접근성 안내

드롭 성공

• 고스트 애니메이션
• 새 위치에 정착
• 원본 위치 닫힘
• 성공 피드백

드롭 취소

• 원위치 애니메이션
• 하이라이트 제거
• 원래 상태 복원
• ESC 또는 영역 밖 릴리즈

인터랙티브 데모

드래그 가능한 항목

⋮⋮ 📄

문서 1

PDF • 2.4 MB

⋮⋮ 🖼️

이미지

PNG • 1.8 MB

⋮⋮ 📊

스프레드시트

XLSX • 512 KB

여기에 드롭하세요

파일을 드래그하여 이곳에 놓으세요

[00:00] 시스템 준비됨 - 드래그 앤 드롭 활성화

키보드 접근성

Space 또는 Enter 항목 선택/놓기

↑ ↓ ← → 선택된 항목 이동

Esc 드래그 취소

Tab 다음 항목으로 이동

창 밖 드래그

브라우저 창 밖으로 드래그 시 자동 취소 또는 경계에서 정지

터치 실수

짧은 터치는 클릭으로 처리, 길게 눌러야 드래그 시작 (haptic 피드백)

다중 소스

여러 드래그 소스 중 하나만 활성화, 다른 것들은 비활성화 표시

중첩 드롭존

부모-자식 드롭존에서 가장 가까운 유효한 존 선택

드래그 앤 드롭 상호작용