HTML - Drag and Drop API: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML5의 Drag and Drop API로 즐거운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 fascinatie 특성을 통해 여러분의 웹 페이지를 더욱 상호작용적이고 사용자 친화적으로 만드는 방법을 안내해 드리겠습니다. 그러니 좋아하는 음료를 한 잔 챙기고 편안하게 앉아 읽어보세요!

HTML - Drag & Drop API

Drag and Drop API는 무엇인가요?

디지털 마법사처럼 요소들을 드래그 앤 드롭할 수 있게 만들기 전에, 이 API가 무엇을 의미하는지 이해해 보겠습니다. Drag and Drop(DnD) API는 HTML 요소들을 드래그 가능하게 만들어, 사용자가 요소를 클릭하고 이동한 다음 새로운 위치에 드롭할 수 있게 합니다. 마치 웹 페이지 요소들에게 초능력을 부여하는 것과 같습니다!

요소를 드래그 가능하게 만들기

기초적인 내용부터 시작해보겠습니다. 요소를 드래그 가능하게 만들기 위해 draggable 속성을 사용해야 합니다. 이 속성을 원하는 HTML 요소에 추가하는 것만으로 충분합니다.

<div draggable="true">드래그하세요!</div>

이 예제에서 우리는 <div> 요소를 만들고 draggable="true"를 설정하여 드래그 가능하게 만들었습니다. 이제 사용자가 이 div를 클릭하고 페이지 내에서 드래그할 수 있습니다. 멋지죠?

하지만 기다리세요, 그런 것만으로는 충분하지 않습니다! 요소를 드래그 가능하게 만드는 것만으로는 충분하지 않습니다. 요소가 드래그되고 드롭될 때 일어나는 일을 제어하기 위해 JavaScript를 추가해야 합니다. 여기서 우리의 드래그 앤 드롭 이벤트가 유용하게 쓰입니다.

드래그 앤 드롭 이벤트

Drag and Drop API는 우리가 듣고 응답할 수 있는 여러 이벤트를 제공합니다. 이 이벤트들은 드래그 앤 드롭 과정을 전적으로 제어할 수 있게 합니다. 주요 이벤트를 살펴보겠습니다:

이벤트 이름	설명
dragstart	사용자가 요소를 드래그 시작할 때 발생
drag	사용자가 요소를 드래그 중일 때 반복적으로 발생
dragenter	드래그된 요소가 유효한 드롭 타겟에 진입할 때 발생
dragover	드래그된 요소가 유효한 드롭 타겟 위에 있을 때 반복적으로 발생
dragleave	드래그된 요소가 유효한 드롭 타겟을 벗어날 때 발생
drop	사용자가 요소를 드롭할 때 발생
dragend	드래그 작업이 끝났을 때 (성공 여부와 관계없이) 발생

이제 이 이벤트들을 실제로 어떻게 사용할 수 있는지 보겠습니다:

<div id="draggable" draggable="true">드래그하세요!</div>
<div id="droppable">여기에 드롭하세요!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
console.log('드래그 시작');
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault(); // 드롭을 허용하기 위해 필요
console.log('드래그 중 드롭 존 위에');
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
console.log('드롭!');
droppable.appendChild(draggable);
});
</script>

이 예제에서 우리는 두 개의 <div> 요소를 만들었습니다: 하나는 드래그 가능하고 다른 하나는 드롭 가능합니다. dragstart, dragover, 그리고 drop 이벤트에 대한 이벤트 리스너를 추가했습니다. 요소를 드래그하고 드롭 존에 드롭할 때 콘솔에 메시지를 보이고, 드래그된 요소가 드롭 존으로 이동합니다.

DataTransfer 객체

이제 우리의 드래그 앤 드롭 도구箱에서 강력한 도구에 대해 이야기해 보겠습니다: DataTransfer 객체. 이 객체는 드래그 앤 드롭 작업 중 이동되는 데이터를 저장하는 데 사용됩니다. 이를 통해 드래그 작업에 대한 정보를 설정하고 가져올 수 있습니다.

이렇게 사용할 수 있습니다:

<div id="draggable" draggable="true">드래그하세요!</div>
<div id="droppable">여기에 드롭하세요!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
});
</script>

이 예제에서 우리는 setData()를 사용하여 드래그 시작 시 드래그된 요소의 ID를 저장하고, drop 이벤트에서 이 데이터를 가져와 드래그된 요소를 이동합니다.

드래그 앤 드롭 과정

이제 개별 요소들을 살펴보았으니, 전체 드래그 앤 드롭 과정을 걸어보겠습니다:

드래그 시작: 사용자가 드래그할 수 있는 요소를 클릭하고 드래그를 시작합니다.
드래그 중: 사용자가 마우스를 움직이면서 요소를 드래그 중입니다.
드롭 존 진입: 드래그된 요소가 유효한 드롭 존에 진입할 때 dragenter 이벤트가 발생합니다.
드롭 존 위에: 드래그된 요소가 드롭 존 위에 있을 때 dragover 이벤트가 반복적으로 발생합니다.
드롭 존 벗어나기: 드래그된 요소가 드롭 존을 벗어날 때 dragleave 이벤트가 발생합니다.
드롭: 사용자가 마우스 버튼을 뗀 다음 요소를 드롭할 때 drop 이벤트가 발생합니다.
드래그 종료: 드래그 작업이 끝났을 때 dragend 이벤트가 발생합니다.

이 모든 것을 통합한 종합 예제를 보겠습니다:

<div id="draggable" draggable="true">드래그하세요!</div>
<div id="droppable">여기에 드롭하세요!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
e.target.style.opacity = '0.5';
});

draggable.addEventListener('dragend', (e) => {
e.target.style.opacity = '';
});

droppable.addEventListener('dragenter', (e) => {
e.target.style.background = 'lightblue';
});

droppable.addEventListener('dragleave', (e) => {
e.target.style.background = '';
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
e.target.style.background = '';
});
</script>

이 예제에서 우리는 모든 드래그 앤 드롭 이벤트를 구현했습니다. 드래그 중 요소의 투명도를 변경하고, 드롭 존에 진입하면 배경을 변경하며, 드롭 존을 벗어나면 배경을 원래 상태로 되돌리고, 드래그된 요소를 드롭 존에 이동합니다.

그리고 여러분! HTML5의 Drag and Drop API 기초를 배웠습니다. 이제 여러분은 사용자가 드래그하고 드롭할 수 있는 상호작용적 요소를 만들 수 있습니다. 연습이 완벽을 이루는 데 필요한 것은 무엇이겠습니까? 맞습니다, 연습입니다! 브루스 리의 말을 기억하십시오: "10,000번의 한 차례 kick을 연습한 사람을 두려워하지 않지만, 한 차례의 kick을 10,000번 연습한 사람을 두려워합니다." 그러니 드래그 앤 드롭 기술을 연습하고, 언제든지 놀라운 상호작용적 웹 경험을 만들어 나가십시오!

happy coding, 그리고 여러분의 요소가 항상 원하는 곳에 드롭되길 바랍니다!

Credits: Image by storyset

이전 튜토리얼:

HTML - 지오로케이션 API

다음 튜토리얼:

HTML - Web Workers API