[JavaScript] 자바스크립트 드래그 앤 드롭 기능 사용하기

127_자바스크립트 드래그 앤 드롭 기능 사용하기

[적용]

• 드래그 앤 드롭 기능을 사용해 파일을 처리하고 싶을 때

---

[문법 1 - 드래그 요소에서 발생하는 이벤트]

이벤트	발생 타이밍
dragstart	요소의 드래그(끌어오기) 시작 시점
drag	요소의 드래그 중인 시점
dragend	요소의 드래그 완료 시점

[문법 2 - 드래그 완료 후 요소에서 발생하는 이벤트]

이벤트	발생 타이밍
dragenter	드래그 중인 포인터가 요소 위치로 이동한 시점
dragover	드래그 중인 포인터가 요소 위치에 있는 시점
dragleave	드래그 중인 포인터가 요소에서 벗어난 시점
drop	요소의 드롭 시점

[문법 3 - 드래그 이벤트 정보]

속성	발생 타이밍	타입
event.dataTransfer.files	드롭한 파일 정보	객체(FileList 객체)

---

[내용]

드래그 앤 드롭 API를 사용하면 HTML 임의의 요소에 드래그한 파일 처리가 가능하다.

 

.character 요소의 드래그 이벤트 샘플을 확인해 보자. 요소 드래그가 가능하도록 draggable 속성을 true로 지정한다.

 

HTML                                                                                                                                                              index.html

<div class="character" draggable="true"></div>

JavaScript                                                                                                                                                          main.js

const character = document.querySelector('.character');

character.addEventListener('dragstart', () => {
  console.log('dragstart 이벤트');
});

character.addEventListener('drag', () => {
  console.log('drag 이벤트');
});

character.addEventListener('dragend', () => {
  console.log('dradend 이벤트');
});

 

실행결과

로그를 통해 각 이벤트의 발생을 확인할 수 있다.

드래그가 완료되면 dragend 이벤트가 콘솔 패널에 출력된다.

drag 이벤트는 드래그 중인 상태라면 지속적으로 발생하는 이벤트이므로 주의가 필요하다.

 

---

[예시 1]

드래그한 .character 요소를 .box 요소에서 처리하는 코드를 확인해 보자.

 

HTML                                                                                                                                                              index.html

<div class="character" draggable="true"></div>
<div class="box">드래그 가능</div>

JavaScript                                                                                                                                                          main.js

const box = document.querySelector('.box');

box.addEventListener('dragenter', () => {
  console.log('dragenter 이벤트');
});

box.addEventListener('dragover', () => {
  console.log('dragover 이벤트');
});

box.addEventListener('dragleave', () => {
  console.log('dragleave 이벤트');
});

실행결과

마우스 포인터가 요소 영역에 들어오면 dragover이벤트가 발생하며,영역을 벗어나면 dragleave 이벤트가 발생한다.

로그를 통해 각 이벤트의 발생을 확인할 수 있다.

이벤트는 요소가 아니라 마우스 포인터의 움직임과 위치에 따라 발생한다.

dragover는 포인터가 요소에 위치해 있으면 이벤트가 지속적으로 발생한다.

---

[예시 2]

드롭 파일의 처리는 drop 이벤트를 사용한다.

브라우저에 파일을 드래그 앤 드롭하면 페이지의 이동이 발생하므로

dragover 이벤트의 event.preventDefault() 처리가 필수다.

 

HTML                                                                                                                                                              index.html

<div class="character" draggable="true"></div>
<div class="box">드롭 영역</div>

JavaScript                                                                                                                                                          main.js

const box = document.querySelector('.box');

// dragover 이벤트 무효화
box.addEventListener('dragover', (event) => {
  event.preventDefault();
});

box.addEventListener('drop', () => {
  console.log('drop 이벤트');
});

실행결과

마우스로 이미지를 드롭하면 drop 이벤트가 발생한다.

로그를 통해 drop 이벤트의 발생을 확인할 수 있다.

---

[예시 2]

드래그를 처리하는 이벤트는 브라우저 밖에서도 유효하다. drop 이벤트 발생 시점에 event.dataTransfer.files의 속성을 통해 파일 리스트에 엑세스할 수 있다.event.dataTransfer.files는 '{0:File 객체, 1:File 객체, ...}'의 파일형식으로 파일 정보를 보관핟.

 

윈도우즈 탐색이나 맥OS Finder의 이미지 파일 드래그 앤 드롭 샘플을 확인해 보자.이미지 표시 처리부분은 생략...

// 파일 업로드 영역
const fileZone = document.querySelector('.file-zone');
...생략...
// 드롭 요소가 중복된 경우 처리
fileZone.addEventListener('dragover', (event) => {
  // 기본 이벤트 작동 해지
  event.preventDefault();
...생략...
});
...생략...
// 드롭 처리
fileZone.addEventListener('drop', (event) => {
  // 기본 이벤트 작동 해지
  event.preventDefault();
...생략...
  // File 객체 참조
  const transferdFiles = event.dataTransfer.files;
  
  // 이미지 표시
  displayImages(transferdFiles);
});

/** 이미지 표시 처리 */
function displayImage(transferdFiles) {
...생략...
}

실행결과

파일 드롭 시 페이지 아래에 해당 파일이 표시된다.드래그 앤 드롭 기능에 업로드 기능의 응용이 가능하다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김