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

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

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

 

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

 

 

하지만 이건 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축 상에 썸네일로 표시

 

 

+ Recent posts