HTML5 강좌 20강 - HTML5 태그 - 드래그 앤 드롭

HTML5 강좌 20강 - HTML5 태그 - 드래그 앤 드롭

이번 강좌에선 드래그 앤 드롭에 대해 알아보겠습니다.

아마도 인터넷을 사용하다보면 종종 봤을텐데요..

마우스를 이용하여 어떠한 콘텐츠를 끌어다 놓는 것을 의미합니다.

*드래그 앤 드롭 처리 과정

(1)드래그할 요소에 드래그 속성 지정

(2)이벤트 지정 및 컨트롤

(3)교환할 데이터에 대한 처리

드래그 앤 드롭 기능을 위해서는 이벤트 컨트롤이 필요한데요.

이동 대상이 되는 요소 안에 이벤트에서 처리할 메소드를 속성으로 지정합니다.

*드래그 앤 드롭 관련 이벤트

(1)dragstart : 드래그 시작시 발생

(2)drag : 드래그 중에 발생

(3)dragend : 드래그 종료했을 때 발생

(4)dragenter : 드래그 요소가 드롭 요소 범위 안에 들어올 때 발생

(5)dragleave : 드래그 요소가 드롭 요소에서 나갔을 때 발생

(6)dragover : 드래그 요소가 드롭 요소 위에서 드래그하고 있을 때 발생

(7)drop : 드롭하였을 때 발생

그리고 데이터 전달을 위해서는 dataTransfer 객체 사용합니다.

*dataTransfer 객체

(1)setData(type, data) : 드래그 시작할 때 데이터 보관

*setData type

Text : 단순한 문자열, MIME 타입 중 text/plain과 같음

URL : URL 문자열, MIME 타입 중 text/url-list와 같음

Files : 브라우저 이외의 애플리케이션으로부터 파일을 드래그 앤 드롭할 때의 타입

(2)getData(type) : 드롭할 때 보관/전달된 데이터를 가져옴

(3)clearData(type) : 드래그 앤 드롭에 사용할 데이터 초기화

간단한 예제를 작성해 보겠습니다.

먼저 드래그 영역으로 사용할 이미지와 div 박스를 설정합니다.

<div id="drag_source" ondrop="drop(event)" ondragover="dropset(event)">

<img id="img" src="images/HTML5_logo1.jpg" width="150" height=150 draggable="true" ondragstart="drag(event)">

</div>

<div id="drag_target" ondrop="drop(event)" ondragover="dropset(event)"></div>

ondrop은 드롭 이벤트의 메소드를 지정하고요, ondragover는 드래그를 하는동안 이벤트의 메소드를 지정합니다.

이미지는 draggable 속성을 true로 지정하여 드래그가 가능하게 설정했습니다.

그리고 ondragstart는 드래그가 시작되면 일어날 이벤트를 지정하는 메소드 입니다.

그리고 css 스타일을 잡아줍니다.

#drag_source,#drag_target { width: 200px; height: 200px; border: 1px solid; float:left; margin-right:10px }

마지막으로 지정했던 메소드들을 자바스크립트 함수로 코드를 만들어 줍니다.

function dropset(event) { event.preventDefault(); }

function drag(event)    { 

event.dataTransfer.setData("Text", event.target.id); 

event.dataTransfer.effectAllowed = "copy";

var icon = document.createElement("img");

icon.src = "images/drag_img.png"

event.dataTransfer.setDragImage(icon, 0, 0);

}

function drop(event)    {

var data = event.dataTransfer.getData("Text");     

event.target.appendChild(document.getElementById(data));

event.preventDefault();

}

초기화면 입니다.

드래그를 하는 과정이죠.

드롭이 완료된 상태입니다.

여기서 중요한 것은 자바스크립트의 함수들이죠.

드래그앤 드롭의 기능을 구현하는 함수들 입니다.

하나씩 볼까요?

(1)dropset()

이 함수에서 사용한 것은 event.preventDefault 입니다.

이 의미는 현재 진행중인 이벤트가 다른 이벤트에 의해 방해를 받지 않고 진행한다는 의미입니다.

드래그 중에 다른 예외적인 이벤트가 발생해서 드래그 이벤트가 종료되지 않게 막는것이죠.

(2)drag()

드래그 중에 일어나는 이벤트를 설정했습니다.

dataTransfer.setData : 데이터 타입을 저장

dataTransfer.effectAllowed : 드래그 효과는 복사입니다.

icon이라는 변수에 이미지를 저장했고요.

dataTransfer.setDragImage : 드래그 하는동안 보여줄 이미지를 위에서 정의한 icon으로 설정

(3)drop()

data라는 변수에 dataTransfer.getData 를 이용하여 저장한 데이터를 지정합니다.

그리고 이벤트의 타겟을 data에 지정했고요.

마지막엔 이벤트 도중에 다른 이벤트로 이벤트가 중단되지 않게 설정합니다.

(예제는 첨부파일에서 받을 수 있습니다.)