터치 장치에서 JavaScript 드래그 앤 드롭 활용하기
스마트폰이나 태블릿 같은 터치 장치에서는 마우스 이벤트 대신 터치 이벤트가 발생하기 때문에, 기본 HTML5 드래그 앤 드롭 API가 의도대로 동작하지 않는 경우가 많습니다. 이런 문제를 해결하려면 jQuery UI Touch Punch 또는 Drag and Drop Touch와 같은 전용 라이브러리를 사용하는 것이 가장 효과적입니다.
이러한 라이브러리는 터치 이벤트(touchstart, touchmove, touchend)를 마우스 이벤트로 변환해 주므로, 데스크톱 환경에서 작성된 기존 드래그 앤 드롭 코드를 거의 수정 없이 터치 장치에서도 재사용할 수 있습니다.
드래그 앤 드롭 과정의 핵심 이벤트
드래그 앤 드롭 전체 흐름을 모니터링하려면 아래 이벤트들에 핸들러를 연결해야 합니다.
- dragstart — 드래그가 시작되는 순간 발생합니다.
- drag — 요소를 드래그하는 동안 지속적으로 발생합니다.
- dragenter — 드래그 중인 요소가 유효한 드롭 대상에 진입할 때 발생합니다.
- dragleave — 드래그 중인 요소가 드롭 대상을 벗어날 때 발생합니다.
- dragover — 드래그 중인 요소가 드롭 대상 위에 있는 동안 반복해서 발생합니다.
- drop — 요소가 드롭 대상 위에 놓였을 때 발생합니다.
- dragend — 드래그 작업이 종료될 때 성공 여부와 관계없이 발생합니다.
드래그 가능한 요소 만들기
요소를 드래그할 수 있게 하려면 해당 엘리먼트에 draggable="true" 속성을 설정하고 dragstart 이벤트 핸들러를 연결합니다.
<div id="box" draggable="true">드래그할 요소</div>또한 dragenter, dragover, dragleave 이벤트 핸들러를 함께 사용하면 드롭 영역의 동작을 세밀하게 제어할 수 있습니다. 특히 dragover 이벤트 안에서 event.preventDefault()를 호출해야 drop 이벤트가 정상적으로 발생하므로 반드시 처리해 주세요.