아싸, W3C 의 형들이 열심히 노력을 하여
HTML5 에서는 Drag & Drop API 가 들어있다고 하니, 훌륭하다.
이전에는 mousedown, mouseover 라는 일반적인 마우스 이벤트를 이용하여 구현하였지만, 이제는 전용 API 가 있는것이다.
일단 드래그 대상을 지정하기위해서는
요소에 draggable 속성을 지정한다.
예) 사과
- DataTransfer 객체
드래그 드롭처리는 DataTransfer 객체를 통해 데이터를 주고 받는다고 보면 된다. 그리고 드래그를 시작할 때 이를 처리하려면 드래그 대상 요소로부터 발생하는 dragstart 이벤트를 이용한다.
- 드롭 대상요소에서 이벤트를 처리
dragenter
dragover
drop
드롭을 허용하려면 이벤트의 기본값 상태를 취소(event.preventDefault()) 해야 한다.
