More actions
imported>beonit No edit summary |
imported>linflus No edit summary |
||
| Line 3: | Line 3: | ||
= 드래그 & 드롭 API = | = 드래그 & 드롭 API = | ||
* 기존 HTML에서는 mousedown, mouseover 등을 이용하여 드래그 & 드롭을 처리했다. | |||
* HTML5에서는 드래그 & 드롭 API를 제공한다. | |||
** 다른 애플리케이션과 데이터를 연계할 수 있다. | |||
= 이용 방법 = | = 이용 방법 = | ||
* 드래그 대상을 지정 | |||
** draggable = 'true' | |||
* 드래그 시작 이벤트 처리 | |||
** dragstart 이벤트 이용 | |||
** ondragstart | |||
** DataTransfer 객체를 이용하여 드래그 대상과 드롭 대상 사이에 임의의 데이터를 주고받는다. | |||
* 드롭 대상 요소에서 발생하는 이벤트를 적절히 처리 | |||
** 기본값 상태에서는 드롭을 허락하지 않는다. | |||
** 드롭을 허용하려면 이벤트의 기본값 상태를 취소할 필요가 있다. | |||
*** event.preventDefault() | |||
** 다음 세 가지의 이벤트를 적절히 처리해야 한다. | |||
** dragenter | |||
*** 드래그 중 마우스 포인터가 요소와 겹치는 순간 호출되는 이벤트이다. | |||
** dragover | |||
*** 드래그 중 마우스 포인터가 요소 위를 가로지를때 단속적으로 발생하는 이벤트이다. | |||
** drop | |||
*** 드롭 시 발생하는 이벤트이다. | |||
*** DataTransfer 객체로부터 데이터를 꺼내어 적절하게 처리하는 부분이다. | |||
*** 데이터를 꺼낼 때는 데이터 포맷 형식의 인수를 이용하여 getData()를 호출한다. | |||
*** Event Bubbling | |||
*** 처리를 끝낸 뒤 이벤트가 다른 욧에 전파되는 것을 막아야 한다. | |||
*** 이벤트 객체가 가진 stopPropagation() 메서드를 호출하여 막을 수 있다. | |||
= 이벤트 = | = 이벤트 = | ||
= 속성과 메서드 = | = 속성과 메서드 = | ||
Revision as of 09:51, 8 October 2010
[[pagelist(^html5)]]
드래그 & 드롭 API
- 기존 HTML에서는 mousedown, mouseover 등을 이용하여 드래그 & 드롭을 처리했다.
- HTML5에서는 드래그 & 드롭 API를 제공한다.
- 다른 애플리케이션과 데이터를 연계할 수 있다.
이용 방법
- 드래그 대상을 지정
- draggable = 'true'
- 드래그 시작 이벤트 처리
- dragstart 이벤트 이용
- ondragstart
- DataTransfer 객체를 이용하여 드래그 대상과 드롭 대상 사이에 임의의 데이터를 주고받는다.
- 드롭 대상 요소에서 발생하는 이벤트를 적절히 처리
- 기본값 상태에서는 드롭을 허락하지 않는다.
- 드롭을 허용하려면 이벤트의 기본값 상태를 취소할 필요가 있다.
- event.preventDefault()
- 다음 세 가지의 이벤트를 적절히 처리해야 한다.
- dragenter
- 드래그 중 마우스 포인터가 요소와 겹치는 순간 호출되는 이벤트이다.
- dragover
- 드래그 중 마우스 포인터가 요소 위를 가로지를때 단속적으로 발생하는 이벤트이다.
- drop
- 드롭 시 발생하는 이벤트이다.
- DataTransfer 객체로부터 데이터를 꺼내어 적절하게 처리하는 부분이다.
- 데이터를 꺼낼 때는 데이터 포맷 형식의 인수를 이용하여 getData()를 호출한다.
- Event Bubbling
- 처리를 끝낸 뒤 이벤트가 다른 욧에 전파되는 것을 막아야 한다.
- 이벤트 객체가 가진 stopPropagation() 메서드를 호출하여 막을 수 있다.