[꿀강] HTML5 Drag & Drop (드래그 앤 드롭)

윈도우 사용자 중 드래그 앤 드롭을 모르는 사용자는 없을 것이다.

우리가 흔히 사용하는 마우스를 눌러 끌어다가 놓는 행위가 드래그 앤 드롭이다.

하지만 웹 페이지에서는 드래그 앤 드롭을 많이 사용하진 않았다.

 

아래와 같이 메일 작성시 파일을 첨부하는 화면이 웹 페이지에서 사용하는 드래그 앤 드롭 방식이다.

 

 

하지만 이건 HTML5를 사용한 것이 아니라 ActiveX를 사용하였거나 플래시 기반의 웹 프로그램으로 처리된 부분이다.

아직은 많은 브라우자가 드래그 앤 드롭을 지원하지 않기 때문에 HTML5의 Drag & Drop 방식으로 처리된 웹 페이지는 많지 않을 것이다.

 

그럼 지금부터 HTML5에는 어떻게 Drag & Drop 방식을 사용하는지 알아보자

HTML5에서 Drag를 하려면 draggable="true"를 적용해 주면 된다.

그럼 모든 오브젝트에 draggable="true" 속성을 적용해야 할까?

아니다. 아래와 같이 HTML에서는 "이미지, a href, 선택한 문자"는 Drag가 된다.

따라서 그 외 오브젝트에만 Drag 속성을 적용하면 된다.

 

 

 

 

draggable="true" 속성을 적용했기 때문에 드래그가 가능하다.

 

 

 

위에서 언급했듯이 a href 는 draggable 속성을 추가하지 않아도 드래그가 가능하다.

 

 

 

이미지 역시 draggable 속성을 적용하지 않았지만 드래그가 가능하다.

 

 

 

일반 텍스트는 기본적으로 드래그가 되지 않는다.

하지만 마우스로 텍스트를 선택 후 드래그를 하면 드래그가 가능하다.

 

 

Drag & Drop API 이벤트

Event	발생 조건
dragstart	드래그가 시작될 때 발생
drag	드래그 중 발생
dragenter	이동할 요소를 마우스로 끌어서 드롭하는 요소에 들어오는 순간 발생
dragover	이동할 요소를 마우스로 끌어서 드롭하는 요소에 올려 놓는 동안 발생
dragleave	이동할 요소를 마우스로 끌어서 드롭하는 요소에서 나갈 때 발생
drop	마우스로 끌어서 놓는 순간 발생
dragend	드롭이 성공 또는 실패 시 발생

 

 

Drag & Drop API 4가지 Method

Method	매개변수	설명
setData	type : text/plain 또는 text/html 같은 일반적인 데이터 타입  data : data sent	dragstart가 시작될때  데이터를 전송할 준비를 함
getData	type : data type	drop 이벤트가 시작될 때 사용
clearData	type : data type	특정한 데이터 타입이 있을 경우 데이터 삭제
setDragImage	요소 : a <img> element  x : x  y : y	마우스 포인터 위치를 기준으로 지정된  <img> 요소를 x, y축 상에 썸네일로 표시