HTML5 드래그 앤 드롭

HTML5 드래그 앤 드롭

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

 

draggable 속성

draggable 속성은 드래그 속성을 부여하는 것을 의미합니다.

draggable 속성의 값이 true 이면 드래그를 할 수 있는 것이고, false 이면 드래그를 하지 못합니다.

a 요소로 생성한 링크나 div 요소로 생성한 영역도 드래그가 가능합니다.

 

예제

<img  id = "image"  src = "flower.jpg"  width = "200"  draggable = "true">

 

드래그 앤 드롭 관련 이벤트

이벤트	설명
dragstart	드래그 시작시 발생함
drag	드래그 중에 발생함
dragend	드래그 종료했을 때 발생함
dragenter	드래그 요소가 드롭 요소 범위 안에 들어올 때 발생함
dragleave	드래그 요소가 드롭 요소에서 나갔을 때 발생함
dragover	드래그 요소가 드롭 요소 위에서 드래그하고 있을 때 발생함
drop	드롭하였을 때 발생함

예제

// drag 이벤트 발생시 drag( ) 메서드를 호출하도록  ondragstart 속성을 지정함  <img  src = "flower.jpg"  width = "200"  draggable = "true"  ondragstart = "drag(event)"> <script  type = "text/javascript">   function  drag(event)   {       event.dataTransfer.setData("Text", event.target.id);   } </script>

 

데이터 전달

드래그 앤 드롭으로 데이터를 교환하기 위해서는 DataTransfer 객체를 사용합니다.

드래그를 시작할 때에는 DataTransfer 객체의 setData( ) 메서드를 사용하여 데이터를 보관하고, 보관하여 전달된 데이터는 드롭할 때 DataTransfer 객체의 getData() 객체를 사용하여 데이터를 가져오게 됩니다.

DataTransfer 객체의 메서드

메서드	설명
clearData(type)	드래그 앤 드롭에 사용할 데이터를 초기화함
setData(type, data)	드래그 앤 드롭을 위한 새로운 요소를 정의함
getData(type)	setData() 메서드에서 정의한 요소와 데이터를 가져옴

드래그 시작시 지정 데이터를 보관하기 위하여 사용하는 setData( ) 메서드에는 type과 data 두 개의 인수를 지정합니다.

setData() 메서드의 type 값

값	설명
Text	단순한 문자열로 MIME 타입 중 text/plain 과 같음
URL	URL 문자열로 MIME 타입 중 text/url-list 와 같음
Files	브라우저 이외의 애플리케이션으로부터 파일을 드래그 앤 드롭할 때의 타입

setData( ) 메서드를 사용하여 전달할 데이터를 보관하면 드롭 측에서는 데이터를 가져오기 위하여 getData( ) 메서드를 사용합니다.

getData( ) 메서드의 인수로 지정할 type의 값은 반드시 setData( ) 메서드에서 지정한 type 값과 같아야 합니다.

 

예제

<img  src = "flower.jpg"  width = "200"  draggable = "true"  ondragstart = "drag(event)"> <div  ondrop = "drop(event)"> </div> <script  type = "text/javascript">   function  drag(event)   {   // 드래그 앤 드롭의 대상이 되는 데이터를 저장함            event.dataTransfer.setData("Text", event.target.id);   }      function  drop(event)   {   // 드래그 앤 드롭의 대상이 되는 데이터를 가져옴       var  data = event.dataTransfer.getData("Text");       // 지정한 데이터를 드롭 대상에 추가함       event.target.appendChild(document.getElementById(data));       event.preventDefault( );   } </script>

 

드래그 앤 드롭 실습 프로그램