[[pagelist(^html5)]]
[[TableOfContents]]

= 드래그 & 드롭 API =
 * 기존 HTML에서는 mousedown, mouseover 등을 이용하여 드래그 & 드롭을 처리했다.
 * HTML5에서는 드래그 & 드롭 API를 제공한다.
  * 다른 애플리케이션과 데이터를 연계할 수 있다.
= 이용 방법 =
 * 드래그 대상을 지정
  * draggable = 'true'
 * 드래그 시작 이벤트 처리
  * dragstart 이벤트 이용
  * ondragstart
  * DataTransfer 객체를 이용하여 드래그 대상과 드롭 대상 사이에 임의의 데이터를 주고받는다. 
 * 드롭 대상 요소에서 발생하는 이벤트를 적절히 처리
  * 기본값 상태에서는 드롭을 허락하지 않는다.
   * 드롭을 허용하려면 이벤트의 기본값 상태를 취소할 필요가 있다.
    * event.preventDefault()
  * 다음 세 가지의 이벤트를 적절히 처리해야 한다.
   * dragenter
    * 드래그 중 마우스 포인터가 요소와 겹치는 순간 호출되는 이벤트이다.
   * dragover
    * 드래그 중 마우스 포인터가 요소 위를 가로지를때 단속적으로 발생하는 이벤트이다.
   * drop
    * 드롭 시 발생하는 이벤트이다.
    * DataTransfer 객체로부터 데이터를 꺼내어 적절하게 처리하는 부분이다.
     * 데이터를 꺼낼 때는 데이터 포맷 형식의 인수를 이용하여 getData()를 호출한다.
    * Event Bubbling
     * 처리를 끝낸 뒤 이벤트가 다른 욧에 전파되는 것을 막아야 한다.
     * 이벤트 객체가 가진 stopPropagation() 메서드를 호출하여 막을 수 있다.
= 이벤트 =
|| 이벤트 || 이벤트를 알리는 곳 || 설명 ||
|| dragstart || 드래그 대상 요소 || 드래그가 시작되었음 ||
|| drag || 드래그 대상 요소 || 드래그 중 ||
|| dragenter || 드래그 중 마우스 커서가 위치한 요소 || 드래그 조작이 요소 안의 범위에 들어옴 ||
|| dragover || 드래그 중 마우스 커서가 위치한 요소 || 드래그 조작이 요소 안의 범위를 통과 중 ||
|| dragleave || 드래그 중 마우스 커서가 위치한 요소 || 드래그 조작이 요소 안의 범위를 벗어남 ||
|| drop || 드롭할 곳의 요소 || 드롭되었음 ||
|| dragend || 드래그 대상 요소 || 드래그 종료 ||
= 속성과 메서드 =