안녕하십니까? 이번엔 Drag & Drop API 에 대해서 살펴보려합니다.
가끔 우리는 사진, 파일 같은 항목들을 Drag & Drop 할 수 있도록 만든 사이트들을 보셨을 겁니다.
Gmail 에서 보셨을텐데요... HTML 5 적용하기 이전에도 구현이 되어있었죠...
이전에 구현되어있던 Gmail 의 Drag & Drop 은 mouseDown, mouseOver 같은 Mouse 이벤트를 이용하여 Javascirpt 로 구현을 한 것이죠.
Javascript 를 사용하지 않았다면 ActiveX 를 사용하였겠지요.
이런 Javascript 나 ActiveX 는 별도의 설치가 필요하거나 Javascript 를 사용함으로써 별도의 부하가 생기고요(어떤 분들은 Client 측의 부하는 대수롭지 않게 넘어가시는 분들도 계시죠?) 그 부하로 인해서 버벅거리는 경우도 발생하였을 겁니다.
하지만, 이제 HTML 5 에서는 Drag & Drop API 를 제공하여 좀 더 손쉽게???, 간단하게??? 다른 플러그인들이 도움없이도 구현할 수 있게 되었습니다.(기존에 만든것들을 버리고 새로 구현해야 하는 숙제가 남긴했지만요... ^^ 캬캬캬)
이젠 웹페이지에 있는 content 를 웹페이지 밖, 그러니까는 데스크탑으로 가져올 수도, 데스크탑의 content 를 웹페이지로 막막막? 가지고 갔다가 가지고 왔다가... 하실수 있습니다. ^^
그럼 시작해 봅니다.
10-1. draggable 속성
HTML 5 에 새로이 추가된 속성중에 draggable 속성이 있습니다. true, false값을 가질 수 있습니다.
딱 눈치로 알수 있듯이...
draggable 속성이 true 이면 drag 할 수 있는 것이고, false 면 당근 drag 못하겠죠?
<img draggable="true" src="IMG_4687.jpg"></img>
사실 HTML 5 에서는 img Element 와 href 속성이 지정된 A Element 만 기본값 상태에서 Drag 할 수 있도록 되어 있습니다... 만... ㅋㅋ
Draggable 값이 True 라고 해서 무조건 Drag 할수 있는 것은 아니고요.
API 를 이용한 Javascript 를 사용하셔야 움직이실 수 있읍니다. ㅋㅋㅋ
10-2. Drag & Drop 관련 Event
그럼, HTML 5 에 새롭게 추가된 Drag & Drop API 의 관련 Event 들을 살펴보기로 하겠습니다.
| Event 이름 | Event 가 발생하는 곳 | Action |
| dragstart | Drag 를 할 Element | Drag 가 시작됨 |
| drag | Drag 를 할 Element | Drag 중 |
| dragenter | Drag 중 Mouse가 Element와 겹치는 순간의 Element | Element 에 진입했음 |
| dragleave | Drag 중 Mouse가 Element에서 떠나는 순간의 Element | Element를 떠남 |
| dragover | Drag 중 Mouse 가 현재 위치한 Element | Element 위를 지나고 있음 |
| drop | Drop 할 Element | Drop 됨 |
| dragend | Drag 하고 있는 Element | Drag 가 끝남 |
특히나 dragenter, dragover, drop 이 세 event 는 Drop 과 관련하여 적절히 사용할 필요가 있습니다.
10-3. DataTransfer
DataTransfer? 이건 또 뭐야? 라는 분이 계실 겁니다.
DataTransfer 객체는 Drag & Drop API 를 사용하는데 있어서 반드시 있어야 하는 객체이구요.
이녀석은 Drag & Drop 되는 녀석들의 Data 를 담는 역할을 합니다.
그럼, DataTransfer 의 속성과 Method 를 살펴보도록 하겠습니다.
| 속성/Method | 설명 |
| dropEffect | Drag & Drop동작의 종류를 나타내는 문자열 copy, move, link, none(초기값) 중 하나 effectAllowed 속성에 의해 허용되지 않은 종류의 동작은 처리할 수 없음. |
| effectAllowed | 허용할 dropEffect를 지정하는 문자열 copy, move, link 와 같은 동작을 허용하며 copyLink, copyMove, linkMove, all 과 같은 둘 이상의 동작을 동시에 허용할 수도 있음. none(drop을 허용하지 않음) 을 지정할 수 있음. dragstart 이벤트에 값을 지정하는 것이 일반적임 |
| types | dragstart 이벤트 발생시 DOM 목록에 있는 data format 을 설정하며 setData 함수를 호출할때 지정되는 format 문자열을 배열형식으로 얻을 수 있음. |
| clearData(type) | Drag & Drop에 사용할 데이터를 초기화하며 Drag 중인 데이터를 삭제함. |
| setData(type, data) | Drag & Draop 하기위해 새로운 요소를 정의하며 Drag & Drop 할 데이터를 저장함. |
| getData(type) | setData 에서 정의한 Element와 Format, 데이터를 가져옴. |
| files | 다른 application 으로부터 Drag & Drop 할 파일을 가져옴. types 속성에 "Files" 라는 문자열이 저장됨. |
| setDragImage(image, x, y) | Drag 중 img Element 를 이용하여 피드백을 지정함. |
| addElement(element) | Drag 중 피드백 image 에 추가할 Element 를 추가함. |
10-4. 예제...
이제 간단한 Drag & Drop 예제를 만들어 보겠습니다. 정말 간단한 예제 입니다. ^^;
<!DOCTYPE html>
<html>
<head>
<title>Drag & Drop Test</title>
<script type="text/javascript">
function drag(target, e) {
e.dataTransfer.setData('Text', target.id);
};
function drop(target, e) {
var id = e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
e.preventDefault();
};
</script>
<style>
div#Red {border:2Px solid #F00;}
div#Blue {border:2Px solid #00F;}
div {width:400px;height:266px;}
a {margin:50px;display:block;}
</style>
</head>
<body>
<div id="Red" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;"></div>
<div id="Blue" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;"></div>
<img draggable="true" id="textlink" ondragstart="drag(this, event);" src="IMG_4687.jpg"></img>
</body>
</html>
<html>
<head>
<title>Drag & Drop Test</title>
<script type="text/javascript">
function drag(target, e) {
e.dataTransfer.setData('Text', target.id);
};
function drop(target, e) {
var id = e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
e.preventDefault();
};
</script>
<style>
div#Red {border:2Px solid #F00;}
div#Blue {border:2Px solid #00F;}
div {width:400px;height:266px;}
a {margin:50px;display:block;}
</style>
</head>
<body>
<div id="Red" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;"></div>
<div id="Blue" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;"></div>
<img draggable="true" id="textlink" ondragstart="drag(this, event);" src="IMG_4687.jpg"></img>
</body>
</html>
위와 같이 firefox, safari, chrome 는 이미지를 이동시킬때 기본적으로 이미지를 표시하지만 ie 의 경우는 마우스커서를 파일 복사할때 나타내는 커서로 변경시킵니다. opera 는 작동을 하지 않는 군요... 다른 속성을 추가해야 할 것으로 보입니다.
예제와 함께 간단하게 Drag & Drop API 를 살펴보았습니다.
위 예제를 한번 다시 살펴보시고요...
그럼 행복한 고수되십시요...
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형
'Web > HTML 5' 카테고리의 다른 글
| [HTML 5] 13. Communication API (0) | 2011.06.19 |
|---|---|
| [HTML 5] 12. Offline Web Application (0) | 2011.06.18 |
| [HTML 5] 10. Canvas Element (2) | 2011.06.18 |
| [HTML 5] 9. Audio Element (0) | 2011.06.14 |
| [HTML 5] 8. Video Element (3) | 2011.06.10 |
