목차
1. 자바스크립트의 드래그 앤 드롭 API
2. draggable 항목의 이벤트
3. drop target에 대한 이벤트
4. dataTransfer 객체를 활용한 자료 전송
5. 예제
6. 드롭 타겟의 이벤트 제어하기
1. 자바스크립트의 드래그 앤 드롭 API
HTML5는 공식적으로 드래그 앤 드롭 스팩을 공개했다. 대부분의 최신 웹 브라우저는 HTML5 스팩을 기반으로 네이티브 드래그 앤 드롭 기능을 구현 할 수 있다.
기본적으로 이미지와 텍스트만 끌 수 있으며 이미지를 끌려면 마우스 버튼을 누른 상태에서 이동하면 된다. 텍스트를 끌려면 일부 텍스트를 하이라이트 해놓고 이미지를 끌 때와 같은 방식으로 끌어다 놓으면 된다.
요소를 끌기 위해서는 HTML 태그에 draggable=true 속성을 넣으면 된다.
<div class="item" draggable="true"></div>
2. draggable 항목의 이벤트
항목을 드래그 하면 다음의 이벤트들이 순서대로 실행된다.
- dragstart
- drag
- dragend
3. drop target에 대한 이벤트
올바른 drop 영역으로 항목을 드래그 할 때에는 다음의 이벤트들이 순서대로 실행다.
- dragenter: 마우스가 대상 객체의 위로 처음 진입할 때 발생함.
- dragover: 드래그하면서 마우스가 대상 객체의 위에 자리 잡고 있을 때 발생함.
- dragleave: 드래그가 끝나서 마우스가 대상 객체의 위에서 벗어날 때 발생함.
- drop: 드래그가 끝나서 드래그하던 객체를 놓는 장소에 위치한 객체에서 발생함.
4. dataTransfer 객체를 활용한 자료 전송
드래그 앤 드롭시 자료를 전달하기 위해서는 dataTransfer 객체를 사용한다.
- dataTransfer(): 이벤트의 속성으로 드래그한 항목에서 드롭 타겟으로 자료를 전송할 수 있다.
dataTransfer 객체는 setData(), getData() 두개의 메소드를 가지고있다..
- setData(): 드래그할 때에 원하는 데이터를 특정한 포멧으로 지정할 수 있다.
dataTransfer.setData(format, data)여기서 format은 text/plain 이나 text/uri-list가 될 수 있다. data 매개변수에는 드래그 객체에 추가할 문자열 자료를 넣어주면 된다.
- getData(): setData() 메소드로 저장한 드래그 값을 가져온다.
dataTransfer.getData(format)format은 text/plain 이나 text/uri-list이고 리턴값은 setData() 메소드로 저장했던 문자열 값 이다.
5. 예제
HTML과 CSS 코드는 다음과 같다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript - Drag and Drop Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>JavaScript - Drag and Drop</h1>
<div class="drop-targets">
<div class="box">
<div class="item" id="item">
</div>
</div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16px;
background-color: #fff;
overflow: hidden;
}
h1 {
color: #323330;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
}
.drop-targets {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 20px 0;
}
.box {
height: 150px;
width: 150px;
border: solid 3px #ccc;
margin: 10px;
/* align items in the box */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.drag-over {
border: dashed 3px red;
}
.item {
height: 75px;
width: 75px;
background-color: #F0DB4F;
}
.hide {
display: none;
}
위 코드를 실행하면 아래와 같은 화면이 나타난다.
노란박스를 드래그 하기 위해서 아래와 같이 draggable="true" 항목을 추가했다.
<div class="item" id="item" draggable="true">
추가한 뒤 화면을 보면 노란 박스가 드래그 되는 것을 확인 할 수 있다.
6. 드래그 가능한 항목의 이벤트 제어하기
style.css 파일에 항목을 숨길 수 있도록 .hide 클래스를 추가했다..
.hide {
display: none;
}
다음으로 app.js 파일에 다음과 같이 코드를 추가했다.
// dom에서 item 항목 가져오기
const item = document.querySelector('.item');
// dragstart 이벤트 추가
item.addEventListener('dragstart', dragStart);
// dragstart 제어
function dragStart(e) {
console.log('drag starts...');
}코드 설명:
- querySelector() 메소드를 사용해 dom에서 드래그 가능한 항목을 가져온다.
- 가져온 항목에 dragstart 이벤트 핸들러를 추가한다.
- 이벤트 핸들러로 지정된 dragStart() 함수를 정의한다.
index.html을 새로 열어 노란 박스를 드래그 하면 콘솔(크롬에서는 F12누른 후 console 탭 클릭)에 "drag starts..." 라는 메시지가 뜨는 것을 확인할 수 있다.
다음으로 dragStart() 이벤트 핸들 함수에서 드래그 중인 항목의 id를 저장하고 숨기도록 코드를 작성했다.
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
e.target.classList.add('hide');
}
이 상태로 화면을 갱신하면 노란박스 드래그 시 원래 자리에 있던 노란박스와 드래그 중인 노란박스가 모두 사라지는 것을 확인할 수 있다. 원래 박스는 사라지고 드래그 중인 박스는 보이게 하고싶기 때문에 코드를 수정했다.
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
setTimeout(() => {
e.target.classList.add('hide');
}, 0);
}
index.html을 다시 실행해보면 드래그 중이 항목만 보이는 것을 확인할 수 있다.
7. 드롭 타겟의 이벤트 제어하기
앞서 style.css에 .drag-over 클래스를 정의해 드래그 객체가 드롭 타겟 안에 들어왔을 때 점선으로 바뀌도록 하였다.
.drag-over {
border: dashed 3px red;
}
드롭 타겟이 점선으로 바뀌는 시점은 dragenter와 dragover 이벤트가 실행되었을 때이다. 또한 dragleave, drop 이벤트가 실행되었다면 다시 원래대로 돌아가야하기 때문에 .drag-over 클래스를 드롭 타겟에 추가/제거하는 코드를 넣어 주었다.
function dragEnter(e) {
e.target.classList.add('drag-over');
}
function dragOver(e) {
e.target.classList.add('drag-over');
}
function dragLeave(e) {
e.target.classList.remove('drag-over');
}
function drop(e) {
e.target.classList.remove('drag-over');
}
이후 노란박스를 드래그해서 드롭 타겟 위로 끌어보면 드롭 타겟이 점선으로 바뀌는 것을 확인할 수 있다.
또한 dragenter, dragover 이벤트 핸들러에 event.preventDefault()를 넣어주어야 한다.
function dragEnter(e) {
e.preventDefault();
e.target.classList.add('drag-over');
}
function dragOver(e) {
e.preventDefault();
e.target.classList.add('drag-over');
}
위와 같이 실행하지 않는다면 div 항목의 기본값은 유효한 드롭 타겟이 아니기 때문에 drop 이벤트는 실행되지 않는다. 다음으로 드롭 타겟에 드래그 항목을 넣으면 드래그 했던 노란박스가 바로 사라지는 것을 볼 수 있다.
이를 해결하기 위해서는 drop 이벤트 핸들러를 정의해야 한다.
- 먼저 dataTransfer 객체의 getData() 메소드를 통해 드래그 중인 항목의 id를 가져와야 한다.
- 그 다음 드래그 중인 항목을 드롭 타겟 항목의 자식으로 추가해야한다.
- 마지막으로 .hide 클래스를 지워 드래그한 항목이 화면에 보이도록 한다.
다음은 drop 이벤트 핸들러의 전체 코드이다.
function drop(e) {
e.target.classList.remove('drag-over');
// 드래그 중인 항목의 id 가져오기
const id = e.dataTransfer.getData('text/plain');
const draggable = document.getElementById(id);
// 드롭 타겟에 드래그 항목 추가
e.target.appendChild(draggable);
// 드래그 했던 항목 화면에 보이기
draggable.classList.remove('hide');
}
이제 다시 실행해 보면 드래그 앤 드롭이 원하는 대로 작동하는 것을 확인할 수 있다.
참고: https://www.javascripttutorial.net/web-apis/javascript-drag-and-drop/
'Language > JavaScript' 카테고리의 다른 글
| [JavaScript] HTMLCollection과 NodeList의 차이 (0) | 2024.03.21 |
|---|---|
| [JavaScript] 동기와 비동기 (0) | 2023.08.16 |
| [JavaScript] 무한 스크롤링 구현하기(fetch와 async/await) (0) | 2023.07.28 |
| [Javascript] isEven() (0) | 2023.07.24 |
| [Javascript] Converting and Checking Numbers: parseFloat(), parseInt(), isNaN(), isFinite(), isInteger() (0) | 2023.07.21 |
