HTML5 에서의 Drag & Drop

아싸, W3C 의 형들이 열심히 노력을 하여

HTML5 에서는 Drag & Drop API 가 들어있다고 하니, 훌륭하다.

이전에는 mousedown, mouseover 라는 일반적인 마우스 이벤트를 이용하여 구현하였지만, 이제는 전용 API 가 있는것이다.

일단 드래그 대상을 지정하기위해서는

요소에 draggable 속성을 지정한다.

예)

사과

- DataTransfer 객체

드래그 드롭처리는 DataTransfer 객체를 통해 데이터를 주고 받는다고 보면 된다. 그리고 드래그를 시작할 때 이를 처리하려면 드래그 대상 요소로부터 발생하는 dragstart 이벤트를 이용한다.

- 드롭 대상요소에서 이벤트를 처리

dragenter

dragover

drop

드롭을 허용하려면 이벤트의 기본값 상태를 취소(event.preventDefault()) 해야 한다.