≡
HTML5

[쉽게 해보는 HTML5] 드래그 앤 드롭 만들기!

   작성자:

정말 오랜만에 써보는 HTML5 관련 글입니다.

얼마만인지 모르겠네요.

 

이전에 "HTML5 연재"로 불리던 HTML5 알아보기 글이 "쉽게 해보는 HTML5"로 뒤를 잇습니다.

쉽게 해보는 HTML5는 아래와 같은 분을 대상으로 합니다.

 

  • HTML5 초보자 (초보 개발자)
    • HTML, 자바스크립트를 이해할 수 있는 사람입니다.
  • 일반인
    • HTML, 자바스크립트가 무엇인지 알면 좋습니다.
    • HTML5란 이름에 호기심이 있는 분, 알아보고 싶은 의욕이 충만한 분이면 OK입니다.

 

사실, HTML이나 자바스크립트(Javascript)를 모른다면 이해하기가 어려울지도 모릅니다. 점과 영어 단어, 그리고 괄호가 무슨 일을 하는 건지 감이 오지 않을 수도 있기 때문입니다. 이해할 수 있게 최대한 쉽게 설명해 보겠습니다.

 

HTML5에서 이번에 살펴볼 내용은 '드래그 앤 드롭'입니다.

그림 등을 끌어서 다른 위치에 놓는 게 드래그 앤 드롭이죠. HTML5에서는 이 드래그 앤 드롭을 쉽게 만들 수 있게 HTML5 표준 자체에서 필요한 기능을 제공하고 있습니다. 덕분에 예전에는 복잡한 자바스크립트를 직접 짜야만 가능했던 드래그 앤 드롭을 태그 몇 개와 자바스크립트 몇 줄만으로 구현할 수 있게 됐습니다.

 

한 마디로 드래그 앤 드롭 지원 자체가 HTML5 표준에 포함돼 있습니다.

 

 

실제로 만든 모습입니다. 끌어다 놓기, 드래그 앤 드롭이 가능합니다. 상자 안에 담긴 노트북을 다른 상자로 끌고 드래그해서 옮겨보세요. 그대로 잘 이동하죠? 이걸 간단하게 만들어 보겠습니다.

 

 

 

 
HTML5, 드래그 앤 드롭
 
들어가기 전에

 

먼저 HTML과 자바스크립트가 무엇인지 알아야겠죠.

HTML은 문서 모양을 만드는 방법입니다.

* <strong>.. </strong> 이런 "태그"라는 걸 활용해 문서에 서식을 적용하거나, 전체 모양이나 배치를 만듭니다.

 

* 태그는 시작과 끝이 있습니다. 보통은 여는 태그가 있으면 닫는 태그도 있어야 합니다. 글자를 굵게 만드는 <strong>굵게 할 글자</strong>처럼 말이죠.

 

* <영문 태그 이름> 이런 모양이 여는 태그, </영문 태그 이름>이 닫는 태그입니다. 거의 대부분은 열었다면 닫아줘야 합니다. 그리고 이런 여러 개의 태그는 각각 같은 이름으로 쌍을 이룹니다.

 

* <body>.. </body> 태그 안에 실제 표시할 내용이 들어갑니다.

 

* <div>.. </div> 태그는 외부와 구분되는 어떤 내용을 담기 위한 상자 역할을 합니다.

 

* <img src="파일 이름.png">.. 는 이미지/사진을 표시하는데 사용합니다.

HTML에 대해 이해에 필요할 만한 간단한 내용을 살펴봤습니다. 좀 더 자세한 내용은 이곳에서 확인해 보세요.

 

자바스크립트는 HTML 문서에서 원하는 동작을 수행하는 명령입니다.

역시나 좀 더 자세한 내용은 이곳에서 확인해 보세요.

 

 

 
HTML5, 드래그 앤 드롭
 
드래그 앤 드롭은?

 

드래그 앤 드롭은 매우 일반적인 기능입니다. 앞서 보신 것처럼 무언가를 집어 든 뒤 다른 위치에 놓는 게 드래그 앤 드롭이죠. HTML5에서는 이 드래그 앤 드롭이 표준의 일부입니다. 어떤 요소든지 드래그 가능하게 만들 수 있습니다.

 

 

 
HTML5, 드래그 앤 드롭
 
지원하는 웹 브라우저는?

 

아래와 같은 웹 브라우저가 드래그 앤 드롭 표준을 지원합니다.

* 인터넷 익스플로러 9(Internet Explorer 9) 버전 이상

* 파이어폭스(Firefox)

* 오페라(Opera)

* 크롬(Chrome)

* 사파리(Safari)

참고: 드래그 앤 드롭은 사파리 5.1.7(Safari 5.1.7) 버전과 그 이전 버전에서는 작동하지 않습니다.

 

 

 
HTML5, 드래그 앤 드롭
 
실제로 해보기

 

이제, 실제로 활용해 만들어 볼까요.

.html 확장자를 가진 텍스트 파일을 하나 만들어 아래 내용을 넣습니다.

위에서 확인한 지원하는 웹 브라우저에서 열어보면 노트북 하나와 드래그 상자 화면이 보일 겁니다.

<!DOCTYPE HTML>

<html>
<head>
<script>
function allowDrop(ev) {
     ev.preventDefault();
}

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

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

</head>

<body>

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

<img id="drag1" src="comp1.png" draggable="true" ondragstart="drag(event)" width="128" height="128">

</body>

</html>

앞서 작성한 HTML 파일 다운로드하기:

dragdrop_ex.zip

 

복잡해 보일지도 모르지만, 드래그 앤 드롭 사건(이벤트)이 발생하는 부분별로 하나씩 살펴보겠습니다.

 

 

 
HTML5, 드래그 앤 드롭
 
드래그 가능하게 만들기

 

제일 먼저 원하는 항목, 요소를 드래그 할 수 있게 만들어야 합니다.

드래그 가능(draggable)? 속성의 값을 참(true)으로 바꿔줍니다.

<img draggable="true">

 

 
HTML5, 드래그 앤 드롭
 
옮기기 전 어딘가 저장

 

원하는 걸 드래그 가능하게 만들었다면, 이제 그 요소를 드래그 했을 때 무얼 발생시킬 건지 지정해야 합니다.

 

위 예에서는 드래그가 시작될 때 ondragstart 속성을 통해 명령 묶음인 함수를 불러옵니다. drag(event) 함수를 말이죠. 함수 안의 내용은 어떤 요소, 데이터를 드래그 할건지 지정하고 있습니다. 이렇게 set 해서 지정하면 드래그할 요소가 바구니 같은 어딘가에 담깁니다.

 

dataTransfer.setData() 함수가 드래그한 요소의 데이터 자료 형태와 그 값을 설정해 저장합니다.

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

이 경우에는 데이터 형태가 "text (텍스트)"이고, 그 값은 드래그한 요소의 식별 값 id 입니다 ("drag1").

 

 

 
HTML5, 드래그 앤 드롭
 
어디에 놓을 건가요?

 

드래그가 끝났을 때 실행되는 ondragover 사건(이벤트) 속성 값은 드래그한 데이터 자료가 어디에 드롭될 수 있는지를 지정합니다.

 

기본적으로, 데이터/요소는 다른 요소에 드롭될 수가 없습니다. 드롭을 허용하려면 그 요소의 이런 기본(Default) 동작을 방지(prevent)해야 합니다.

이 동작은 ondragover 이벤트 발생 때 event.preventDefault() 함수를 호출해 해낼 수 있습니다.

event.preventDefault()

 

 
HTML5, 드래그 앤 드롭
 
이제 드롭하기

 

드래그한 데이터 자료를 드롭해서 놓았을 때, 드롭(drop) 이벤트 사건이 발생합니다.

위 예에서는 ondrop(드롭할 때) 속성이 drop(event) 함수를 부릅니다.

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

그 내용은 이렇습니다.

* preventDefault() 함수를 호출해 이 자료에 대한 웹 브라우저의 기본 동작을 막습니다 (기본 동작은 드롭해서 놓을 때 링크로서 여는 겁니다).

 

* dataTransfer.getData() 함수로 드래그한 데이터 자료를 얻습니다. 이 함수는 앞서 위에서 setData() 함수로 지정/저장한 같은 형태의 (모든) 자료를 건네줍니다.

 

* 여기서 드래그한 데이터 자료는 드래그한 요소의 식별 id 값입니다 ("drag1").

 

* 드롭해 놓은 상자 같은 요소에 드래그한 요소를 집어 넣습니다 (append).

 

 
HTML5, 드래그 앤 드롭
 
마무리

 

이렇게 해서, 여러분도 HTML5 만으로 "드래그 앤 드롭"을 만들어 보실 수 있게 됐습니다. 어떠신가요? 나름대로 재미있게 느껴지지 않으세요? 쉽다고 생각하고서 차근차근 따라가다 보면 그리 어렵지만은 않음을 발견하셨을 겁니다. 여기에 가능성이 있죠. 무엇이든 할 수 있는 가능성. 얼핏 보기에는 그냥 드래그 앤 드롭 동작을 하나 구현한 것이지만, 사실 이걸 잘만 활용하고 확장하면 퀴즈 문제 풀기나 재미있는 낱말 맞추기, 혹은 실용적인 쇼핑 카트 같은 것도 만들 수 있습니다. 여러분의 상상력의 크기 만큼 무한한 가능성이 바로 손 끝에서 열리는 거죠. 오늘날 이런 세계가 열릴 거라곤 예전에는 미처 생각하지 못했을지도 모릅니다.

 

 

위에서 이야기하는 것처럼 말이죠. 혹시 보셨나요 😊?

이 글이 HTML5를 이해하고 맛보는데 도움이 되었으면 좋겠습니다.

그 재미를 경험하는 계기가 된다면 더 없이 좋을 거고 말이죠.

 

이후에도 계속해서 HTML5란 녀석을 살펴나가 보겠습니다.

최종 수정일:
서지스윈

서지스윈

IT와 기술을 이해하고, 유용한 소프트웨어를 발견하도록 돕고 싶습니다. 윈도우(Windows), 맥(macOS), 리눅스(Linux), 스마트폰 앱, 웹 서비스, 기획 시리즈물까지. 더 많은 것을 발견하고, 더 많은 것을 해보세요.