Latest revision as of 01:40, 27 March 2026

드래그 & 드롭 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	드래그 대상 요소	드래그 종료

속성과 메서드

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

예제

참조

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

@@ Line 1: / Line 1: @@
-&#91;&#91;pagelist(^html5)&#93;&#93;
+<!-- MONIWIKI PageList(^html5) -->
+* [[html5]]
+* [[html5/VA]]
+* [[html5/canvas]]
+* [[html5/communicationAPI]]
+* [[html5/drag-and-drop]]
+* [[html5/form]]
+* [[html5/geolocation]]
+* [[html5/offline-web-application]]
+* [[html5/others-api]]
+* [[html5/outline]]
+* [[html5/overview]]
+* [[html5/richtext-edit]]
+* [[html5/section]]
+* [[html5/video&audio]]
+* [[html5/web-storage]]
+* [[html5/web-workers]]
+* [[html5/webSqlDatabase]]
+* [[html5/websocket]]
+* [[html5/문제점]]
+* [[html5practice]]
+* [[html5practice/roundRect]]
+* [[html5practice/계층형자료구조그리기]]
+* [[html5practice/즐겨찾기목록만들기]]
 __TOC__
@@ Line 98: / Line 121: @@
 |}
 = 예제 =
- &lt;!DOCTYPE HTML&gt;
- &lt;html&gt;
- &lt;head&gt;
- &lt;meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”/&gt;
- &lt;center&gt;&lt;title&gt;HTML5 Drag and drop demonstration&lt;/title&gt;
- &lt;style type=”text/css”&gt;
- #boxA, #boxB, #boxC {
- float:left; width:165px; height:165px; padding:10px; margin:10px;
- }
- #boxA { background-color: #474747; }
- #boxB { background-color: #474747; }
- #boxC { background-color: #474747; }
- #drag, #drag2, #drag3 {
- width:30px; height:30px; padding:5px; margin:5px;
- -moz-user-select:none;
- }
- #drag { background-color: #e8e8e8;}
- #drag2 { background-color: orange;}
- #drag3 { background-color: purple; border:3px brown solid;}
- &lt;/style&gt;
- &lt;script type=”text/javascript”&gt;
- function dragStart(ev) {
- ev.dataTransfer.effectAllowed=’move’;
- //ev.dataTransfer.dropEffect=’move’;
- ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));
- ev.dataTransfer.setDragImage(ev.target,0,0);
- return true;
- }
- function dragEnter(ev) {
- var idelt = ev.dataTransfer.getData(“Text”);
- return true;
- }
- function dragOver(ev) {
- var idelt = ev.dataTransfer.getData(“Text”);
- var id = ev.target.getAttribute(‘id’);
- if( (id ==’boxB’ || id ==’boxA’) &amp;&amp; (idelt == ‘drag’ || idelt==’drag2′))
- return false;
- else if( id ==’boxC’ &amp;&amp; idelt == ‘drag3′)
- return false;
- else
- return true;
- }
- function dragEnd(ev) {
- ev.dataTransfer.clearData(“Text”);
- return true
- }
- function dragDrop(ev) {
- var idelt = ev.dataTransfer.getData(“Text”);
- ev.target.appendChild(document.getElementById(idelt));
- ev.stopPropagation();
- return false; // return false so the event will not be propagated to the browser
- }
- &lt;/script&gt;
- &lt;/head&gt;
- &lt;body&gt;
- &lt;h1&gt;Drag and drop HTML5 demo&lt;/h1&gt;
- &lt;div&gt;there are many other variables that can be used also, we will coer this another day.
- &lt;/div&gt;
- &lt;div id=”boxA”
- ondragenter=”return dragEnter(event)”
- ondrop=”return dragDrop(event)”
- ondragover=”return dragOver(event)”&gt;
- &lt;div id=”drag” draggable=”true”
- ondragstart=”return dragStart(event)”
- ondragend=”return dragEnd(event)”&gt;drag me&lt;/div&gt;
- &lt;div id=”drag2″ draggable=”true”
- ondragstart=”return dragStart(event)”
- ondragend=”return dragEnd(event)”&gt;drag me&lt;/div&gt;
- &lt;div id=”drag3″ draggable=”true”
- ondragstart=”return dragStart(event)”
- ondragend=”return dragEnd(event)”&gt;drag me&lt;/div&gt;
- &lt;/div&gt;
- &lt;div id=”boxB”
- ondragenter=”return dragEnter(event)”
- ondrop=”return dragDrop(event)”
- ondragover=”return dragOver(event)”&gt;
- &lt;/div&gt;
- &lt;div id=”boxC”
- ondragenter=”return dragEnter(event)”
- ondrop=”return dragDrop(event)”
- ondragover=”return dragOver(event)”&gt;
- &lt;/div&gt;
- &lt;div style=”clear:both”&gt;Example created by &lt;a href=”http://html5tutorial.net/”&gt;HTML Tutorials&lt;/a&gt;.&lt;/div&gt;
- &lt;/body&gt;&lt;/center&gt;
- &lt;/html&gt;
 * http://html5tutorial.net/tutorials/drag-and-drop.html
+* http://html5demos.com/file-api
 = 참조 =
 * http://dev.w3.org/html5/spec/dnd.html