HTML5를 활용한 드래그앤드롭

HTML5 이전에는 드래그앤드롭 기능을 사용하기 위해선 복잡한 스크립트 작업을 해야 했습니다.
그러나 HTML5에서 새로이 추가된 확장태그 중에 draggable 속성이 있는데 이 속성을 활용하면 쉽게 드래그앤드롭 기능을 사용할 수 있습니다.
draggable 속성중에는 ture, false, auto 3가지 값을 가지고 있으며, 사용방법은 아래와 같습니다.

HTML5에 추가된 드래그앤드롭 관련 이벤트

이벤트 이름	이벤트 설명
ondragstart	드래그가 시잘될 때 발생하는 이벤트
ondrag	요소가 드래그 중일 때. 드래그 중 마우스를 떼지 않았을때 발생하는 이벤트
ondragend	드래그가 끝날 때. 드래그를 하고 마우스를 뗄 때 발생하는 이벤트
ondragenter	정확히 드롭을 목표한 공간에 마우스를 떼어 드래그를 끝낼때 발생하는 이벤트
ondragleave	드롭을 목표로한 공간에서 요소를 꺼낼때 발생하는 이벤트
ondragover	드롭을 목표로한 공간을 드래그한 상태로 요소가 지나갈 때 발생하는 이벤트
ondrop	드롭이 될 때 발생하는 이벤트

dataTransfer 전송 타입

드래그앤드롭으로 이동을 시킬때에는 서로 데이터를 주고 받아야 합니다. 이때 사용되는 것이 'dataTransfer' 오브젝트 입니다.
사용방법은 아래와 같습니다.
event.dataTransfer.전송타입('데이터타입');

Type	이벤트 설명
dataTransfer.setData(type, data)	- key/value 쌍으로 MIME 타입과 데이터 저장(여러 세트 저장 가능) - Draggable의 dragstart 이벤트에서 Draggable의 정보를 저장하기 위해 사용 - 브라우저의 기본 드래그 요소나 외부 애플리케이션의 드래그 요소는 자동으로 여러 세트의 MIME 타입이 지정됨
dataTransfer.getData(type)	- 지정한 MIME 타입의 데이터 반환 - droppable의 drop 이벤트에서 draggable의 정보를 꺼내기 위해 사용

드래그앤드롭 실습예제

여러나라의 음식이미지를 이미지를 각 화면에 맞게 분류하는 예재룰 만들어야 합니다.
그럼 먼저 HTML 마크업을 해야 합니다. 마크업은 아래와 같이 하면 됩니다.

CSS

div {width:320px; height:320px; text-align:center; border:1px solid #000; padding:5px; margin:20px;}
img {width:75px; height:60px; padding:5px;}
h2 {font-size:.8em; color:#000; font-weight:bold;}
.fl {float:left;}

HTML

	
한국음식


	
중국음식


	
서양음식

일단 위와같이 4개의 각각 드래그앤드롭될 div 박스를 만든 후 이미지 드래그를 시작하자마자 'drop' 함수를 자바스크립트에서 호출할 것입니다.
또한 드래그앤드롭되는 동안 발생하는 문제를 막기위해 'ondragenter', 'ondragover' 를 'false' 시켰습니다.
또한 각 이미지에는 드래그를 시작하자마자 이벤트가 발생해야 하므로 'ondragstart' 이벤트 핸들러를 사용 하였습니다.

자바스크립트

function drag(target, food) {		//드래그 시작시 호출 할 함수
	food.dataTransfer.setData('Text', target.id);
};
function drop(target, food) {		//드롭시 호출 할 함수
	var id = food.dataTransfer.getData('Text');
	target.appendChild(document.getElementById(id));
	food.preventDefault();	
};

drag 함수에서는 'food.dataTransfer.setData'를 이용하여 아미지 정보를 셋팅하였고, 'food.dataTransfer.getData'를 이용하여 드래그 되고 이는 정보를 가져왔습니다.
그리고 'food.preventDefault()'를 사용하여 이벤트를 종료하였습니다.

위 예제를 응용한다면 장바구니 담기 등 여러방면에서 응용하여 사용이 가능할 것입니다.
위 예제를 첨부하오니 학습하는데 도움이 되었으면 합니다.

html5 드래그앤드롭.zip

다운로드