HTML5 Drag and Drop

HTML5를 하나둘씩 공부해 가면서 Drag & Drop(이하 D&D)을 만났다. HTML5 이전에도  D&D를 구현해서 사용은 하였지만 너무 복잡해서 문제를 야기 시키기도 했다. HTML5 에서는 API 차원에서  D&D를 지원하여 보다 쉽게 구현할 수 있다.

HTML5에서 D&D 위해 추가된 속성은 Draggable 이고 관련하여 추가된 이벤트는 아래와 같다.

onDrag - Script to be run when an element is dragged

onDragEnd - Script to be run at the end of a drag operation

onDragEnter - Script to be run when an element has been dragged to a valid drop target

onDragLeave - Script to be run when an element leaves a valid drop target

onDragOver - Script to be run when an element is being dragged over a valid drop target

onDragStart - Script to be run at the start of a drag operation

onDrop - Script to be run when dragged element is being dropped

하지만 가장 간단하게 구현하는 방법은  드래그 하고자하는 엘리먼트에 대해서 Draggable 속성을 true로 설정하고 드래그 되는 대상에 드래그가 시작되었을 때의 처리와 놓여지는 대상에 드래그 되어 올라올 경우와 놓여지는 경우에 대한 처리를 해 주면 된다.( onDragStart ,  onDragOver,  onDrop)

우선 드래그 하고자 하는 대상에 대하여 Draggable 속성을 true로 부여하면 드래그 되어 진다.
<div id="zone1" class="zone"> <img id="DragItem" draggable="true" src="html5_logo.jpg"/> </div> <br/> <div id="zone2" class="zone"> </div>

위의 코드 만드로 이미지를 드래그 할 수 있는 준비를 한 것이다. 위에서 부여된 속성에 의해 아래처럼 드래그가 된다.

이제 D&D 관련되는 이벤트를 설정해 주었다.
드래그 시작되는 엘리먼트에 시작되었을때 발생하는 onDragStart 에 핸들러를 부여하고 받고자 하는 엘리먼트에 드래그 되어 올라오는 경우의 이벤트 onDragOver에 핸들러는 부여했다.
<script> function dragStart(ev) { ev.dataTransfer.setData("text/plain", ev.target.id); } function dragOver(ev) { ev.preventDefault(); } <script> <div id="zone1" class="zone"> <img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/> </div> <br/> <div id="zone2" class="zone" onDragOver="dragOver(event)"> </div>

그렇게 하면 드래그 하고자하는 것을 놓고자 하는 곳으로 드래그 하면 커서 아이콘도 바뀐다.

마지막으로 드래그 되어져서 놓였을때 받을 대상에 대한 onDrop 이벤트에 핸들러를 부여하여 처리 한다.
<script> function dragStart(ev) { ev.dataTransfer.setData("text/plain", ev.target.id); } function dragOver(ev) { ev.preventDefault(); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text/plain"); ev.target.appendChild( document.getElementById( data ) ); } <script> <div id="zone1" class="zone"> <img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/> </div> <br/> <div id="zone2" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)"> </div>

그러면 대상에 Drop을 하면 Drop 대상체가 핸들러에 의해 이를 수용 한다.

마지막으로 두 개의 Div에 대해서 Drop을 받을 수 있도로 하였다.
<script> function dragStart(ev) { ev.dataTransfer.setData("text/plain", ev.target.id); } function dragOver(ev) { ev.preventDefault(); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text/plain"); ev.target.appendChild( document.getElementById( data ) ); } <script> <div id="zone1" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)"> <img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/> </div> <br/> <div id="zone2" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)"> </div>

이제 두 Div 사이에 이미지를 옮길 수 있다.

드래그 시작할 때 부여되는 핸들러인 dragStart는 드래그 되어지는 대상에 대한 정보를 저장한다.
event.dataTransfer.setData("text/plain", ev.target.id);

이 명령으로 드래그 되어지는 대상의 ID를 저장한다.  드래그 되어 올려지는 대상체에 부여된 핸들러 함수는 간단하게 한 줄로 되었다.
ev.preventDefault();

이 코드는 기존의 UR을 드래그 하는 기본적인 핸들링을 방지하고 새로 정의된 D&D를 사용하기 위한 것이다.

마지막으로 Drop 되어 놓여지는 대상체에 대한 처리를 위한 dragDrop 함수 이다. 그래그 되어진 엘리먼트를 놓여지는 곳으로 이동한다. 

보다 많은 이벤트 핸들러가 있고 더 많은 기능을 구현할 수 있지만 기본 기능은 아주 간단한 코드로 구현할 수 있다.