U E D R , A S I H C RSS
ZeroWiki

html5/drag-and-drop

Difference between r1.7 and the current

@@ -49,108 +49,7 @@
|| setDragImage(image, x, y) ||img 요소를 이용하여 드래그 중의 피드백을 지정한다. ||
|| addElement(element) ||드래그 중 피드백 이미지에 추가할 요소를 지정한다. ||
= 예제 =
{{{
<!DOCTYPE HTML>
<html>
<head>
<center><meta content="text/html; charset=UTF-8″ http-equiv="content-type"/>
<title>HTML5 Drag and drop demonstration</title>
<style type="text/css">
#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;}
</style>
<script type="text/javascript">
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') && (idelt == 'drag' || idelt=='drag2'))
return false;
else if( id =='boxC' && 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
}
</script>
</head>
<body>
<h1>Drag and drop HTML5 demo</h1>
<div>there are many other variables that can be used also, we will coer this another day.
</div>
<div id="boxA"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
 
<div id="drag" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
 
<div id="drag2" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
 
<div id="drag3" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
 
</div>
 
<div id="boxB"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
 
<div id="boxC"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
<div style="clear:both">Example created by <a href="http://html5tutorial.net/">HTML Tutorials</a>.</div>
</body></center>
</html>
* 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. 참조

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.1178 sec