Difference between r1.3 and the current

@@ -29,12 +29,27 @@

* 처리를 끝낸 뒤 이벤트가 다른 욧에 전파되는 것을 막아야 한다.
* 이벤트 객체가 가진 stopPropagation() 메서드를 호출하여 막을 수 있다.
= 이벤트 =

|| 이벤트 || 이벤트를 알리는 곳 || 설명 ||

|| dragstart || 드래그 대상 요소 || 드래그가 시작되었음 ||

|| drag || 드래그 대상 요소 || 드래그 중 ||

|| dragenter || 드래그 중 마우스 커서가 위치한 요소 || 드래그 조작이 요소 안의 범위에 들어옴 ||

|| dragover || 드래그 중 마우스 커서가 위치한 요소 || 드래그 조작이 요소 안의 범위를 통과 중 ||

|| dragleave || 드래그 중 마우스 커서가 위치한 요소 || 드래그 조작이 요소 안의 범위를 벗어남 ||

|| drop || 드롭할 곳의 요소 || 드롭되었음 ||

|| dragend || 드래그 대상 요소 || 드래그 종료 ||

|| '''이벤트''' || '''이벤트를 알리는 곳''' || '''설명''' ||

|| dragstart ||드래그 대상 요소 ||드래그가 시작되었음 ||

|| drag ||드래그 대상 요소 ||드래그 중 ||

|| dragenter ||드래그 중 마우스 커서가 위치한 요소 ||드래그 조작이 요소 안의 범위에 들어옴 ||

|| dragover ||드래그 중 마우스 커서가 위치한 요소 ||드래그 조작이 요소 안의 범위를 통과 중 ||

|| dragleave ||드래그 중 마우스 커서가 위치한 요소 ||드래그 조작이 요소 안의 범위를 벗어남 ||

|| drop ||드롭할 곳의 요소 ||드롭되었음 ||

|| dragend ||드래그 대상 요소 ||드래그 종료 ||

= 속성과 메서드 =

|| '''속성/메서드''' || '''설명''' ||

|| dropEffect ||드래그 & 드롭 동작의 종류를 나타내는 문자열 ||

|| effectAllowed ||허용할 dropEffect를 지정하는 문자열 ||

|| types ||setData()를 호출할 때 지정되는 포맷 문자열을 배열 형식으로 얻을 수 있다. ||

|| clearData(type) ||드래그 중인 데이터를 삭제한다. ||

|| setData(type, data) ||드래그 & 드롭할 데이터를 저장한다. ||

|| getData(type) ||포맷을 지정하여 데이터를 가져온다. ||

|| files ||다른 어플리케이션으로부터 드래그 & 드롭된 파일을 가져온다. ||

|| setDragImage(image, x, y) ||img 요소를 이용하여 드래그 중의 피드백을 지정한다. ||

|| addElement(element) ||드래그 중 피드백 이미지에 추가할 요소를 지정한다. ||

= 예제 =

* http://html5tutorial.net/tutorials/drag-and-drop.html

* http://html5demos.com/file-api

= 참조 =

* http://dev.w3.org/html5/spec/dnd.html

1. 드래그 & 드롭 API ¶

기존 HTML에서는 mousedown, mouseover 등을 이용하여 드래그 & 드롭을 처리했다.
HTML5에서는 드래그 & 드롭 API를 제공한다.
- 다른 애플리케이션과 데이터를 연계할 수 있다.

2. 이용 방법 ¶

드래그 대상을 지정
- draggable = 'true'
드래그 시작 이벤트 처리
- dragstart 이벤트 이용
- ondragstart
- DataTransfer 객체를 이용하여 드래그 대상과 드롭 대상 사이에 임의의 데이터를 주고받는다.
드롭 대상 요소에서 발생하는 이벤트를 적절히 처리
- 기본값 상태에서는 드롭을 허락하지 않는다.
  - 드롭을 허용하려면 이벤트의 기본값 상태를 취소할 필요가 있다.
    - event.preventDefault()
- 다음 세 가지의 이벤트를 적절히 처리해야 한다.
  - dragenter
    - 드래그 중 마우스 포인터가 요소와 겹치는 순간 호출되는 이벤트이다.
  - dragover
    - 드래그 중 마우스 포인터가 요소 위를 가로지를때 단속적으로 발생하는 이벤트이다.
  - drop
    - 드롭 시 발생하는 이벤트이다.
    - DataTransfer 객체로부터 데이터를 꺼내어 적절하게 처리하는 부분이다.
      - 데이터를 꺼낼 때는 데이터 포맷 형식의 인수를 이용하여 getData()를 호출한다.
    - Event Bubbling
      - 처리를 끝낸 뒤 이벤트가 다른 욧에 전파되는 것을 막아야 한다.
      - 이벤트 객체가 가진 stopPropagation() 메서드를 호출하여 막을 수 있다.

3. 이벤트 ¶

이벤트	이벤트를 알리는 곳	설명
dragstart	드래그 대상 요소	드래그가 시작되었음
drag	드래그 대상 요소	드래그 중
dragenter	드래그 중 마우스 커서가 위치한 요소	드래그 조작이 요소 안의 범위에 들어옴
dragover	드래그 중 마우스 커서가 위치한 요소	드래그 조작이 요소 안의 범위를 통과 중
dragleave	드래그 중 마우스 커서가 위치한 요소	드래그 조작이 요소 안의 범위를 벗어남
drop	드롭할 곳의 요소	드롭되었음
dragend	드래그 대상 요소	드래그 종료

4. 속성과 메서드 ¶

속성/메서드	설명
dropEffect	드래그 & 드롭 동작의 종류를 나타내는 문자열
effectAllowed	허용할 dropEffect를 지정하는 문자열
types	setData()를 호출할 때 지정되는 포맷 문자열을 배열 형식으로 얻을 수 있다.
clearData(type)	드래그 중인 데이터를 삭제한다.
setData(type, data)	드래그 & 드롭할 데이터를 저장한다.
getData(type)	포맷을 지정하여 데이터를 가져온다.
files	다른 어플리케이션으로부터 드래그 & 드롭된 파일을 가져온다.
setDragImage(image, x, y)	img 요소를 이용하여 드래그 중의 피드백을 지정한다.
addElement(element)	드래그 중 피드백 이미지에 추가할 요소를 지정한다.

5. 예제 ¶

6. 참조 ¶

http://dev.w3.org/html5/spec/dnd.html

html5/drag-and-drop