h42. HTML5 드래그 앤 드롭

HTML5 드래그 앤 드롭

HTML5 에서는 드래그 앤 드롭이 표준의 일부가 되었습니다. 어떤 태그 들도 드래그 앤 드롭을 할 수 있습니다.

크롬, 사파리, 파이어 폭스, 오페라, IE9 이상에서 드래그 앤 드롭 기능이 완전하게 지원됩니다.

---

먼저 드래그 할 태그에 draggable 속성을 "true" 로 설정하고, ondragstart 속성에 드래그 되면 실행될 자바스크립트 함수를 넣어 줍니다.

draggable="true" ondragstart="drag(event)"

위에서 ondragstart 속성이 drag(event) 함수를 호출합니다. drag(event) 함수는 드래그 될 데이터를 정의합니다.

drag() 함수가 호출되면 dataTransfer.setData() 함수가 드래그 된 데이터 형식과 데이터 값을 설정합니다.

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

즉, 데이터 형식은 문자열이고, 데이터 값은 드래그 되는 태그의 id 즉 "image1" 이 됩니다. 

결국 "image1" 이라는 텍스트가 ev.dataTransfer 의 데이터로 저장 되었습니다.

---

이 ev.dataTransfer 의 데이터를, drop() 함수에서 새로운 태그의 자식 요소로 붙여주면 됩니다.

드롭 할 태그에는 아래의 속성에 함수를 지정해 주어야 합니다.

ondrop="drop(event)" ondragover="allowDrop(event)"

기본적으로 드래그 된 태그가, 다른 태그에는 드롭되지 않게 되어있는데, 다른 태그에도 드롭되게 하려면, 해당 태그의 기본 동작을 event.preventDefault() 함수로 중지시켜야 합니다. 

ondragover 속성에 지정된 allowDrop(event) 가 이 preventDefault() 함수를 호출하여, 해당 태그에 드롭될 수 있도록 해줍니다.

그리고 드래그 한 태그가 드롭될 때는 ondrop 속성에 지정된 drop(event) 함수가 실행됩니다.

function drop(ev) {
ev.preventDefault();
var c = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(c));
}

drop() 함수에서는 먼저 다른 태그에 가서 드롭 될 수 있도록 preventDefault() 함수를 실행하였습니다. 

부연설명 드리면, 기본적으로 태그 들은 드롭되는 대신에 링크가 열리도록 기본 동작이 설정되어 있는데, 드롭으로 바꾸기 위해서는 기본 동작을 중지시키는 것입니다.

drag() 함수에서 저장해둔 드래그 된 데이터를, drop() 함수에서 dataTransfer.getData() 함수로 가져 오는데, setData() 함수에서 저장해둔 동일한 데이터 형식으로 가져 옵니다.

이렇게 가져온 데이터를 변수 "c" 에 담았는데, 사실 데이터에 담긴 것은 드래그된 태그의 id 값 "image1" 입니다. 

이것을 드롭 할 태그 영역에 자식으로 추가해 주면, 드래그 한 태그가 다른 태그 속으로 드롭 되는 것입니다.

---

아래 이미지를 옆의 빈 박스 영역으로 드래그 앤 드롭 해 보세요.

---

<style>
#a, #b
{float:left; width:80px; height:80px; margin:10px;padding:10px;border:10px solid #ffaaaa;}
</style>
<script>
function allowDrop(ev) {
 ev.preventDefault();
}

function drag(ev) {
 ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
 ev.preventDefault();
 var c = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(c));
}
</script>

<div id="a" ondrop="drop(event)" ondragover="allowDrop(event)">
 <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-11/72/Shopping-basket-full-icon.png" draggable="true" ondragstart="drag(event)" id="image1" width="72" height="72">
</div>

<div id="b" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

---

[광고] Udemy 동영상 강의로 보기