[ Vue.js ] vue3 를 사용하여 Drag & Drop 구현하기. 드래그 드롭

사용 환경 및 기술 : vue-cli 4.5.x, vue.js 3, router, reference, etc..

Vue.js 3 를 사용하여 동영상 강의를 시청, 그리고 드래그-드롭 기능을 구현하였다.

App.vue, Home.vue, DropZone.vue  이렇게 3가지 파일로 구분하였고, App.vue의 내용은 정말 없다

// App.vue
<template>
  <router-view/>
</template>

router/index.js 에서 Home.vue를 / 경로로 인식하게 하여 아예 Home.vue만 보이게 사용하였다.
(사실 굳이 router는 필요없었다.)

Home.vue에서는 DropZone.vue 파일을 컴포넌트로 사용한다.

// Home.vue

<template>
  <div class="home">
    <h1>Drag Or Drop</h1>
    <drop-zone @drop.prevent="drop" @change="selectedFile"></drop-zone>
    <span class="file-info">File: {{ dropzoneFile.name }}</span>
  </div>
</template>

<script>
import { ref } from 'vue'
import DropZone from '@/components/DropZone'

export default {
  name: 'Home',
  components: {
      DropZone
  },
  setup () {
    let dropzoneFile = ref('')	// ref를 통해 dropzoneFile이라는 변수로 drop-zone 컴포넌트에 데이터를 공유해준다.
    
    // drop : 파일을 끌고와 영역 안에 해당 파일을 놓았을 경우 발생하는 이벤트.
    const drop = (e) => {
      dropzoneFile.value = e.dataTransfer.files[0] 		// dataTransfer이라는 js의 기능을 사용하여 file의 첫번째를 인식
    }

    const selectedFile = () => {
      dropzoneFile.value = document.querySelector('#dropzoneFile').files[0]	 // DropZone.vue에 있는 input type="file" 태그
      // 파일이 인식되었을 때, 파일의 이름을 찾아서 출력해줌.
    }

    return { dropzoneFile, drop, selectedFile }
  }
}
</script>

Home.vue에 대한 간략한 설명.

. 'dropzoneFile' 이라는 변수를 ref로 선언하여 하위 컴포넌트에서 끌어다가 사용한다.
. event가 발생하는 것을 drop이 인식하여, dropzoneFile의 값에 이벤트의 값을 넣어준다. (올려놓은 파일에 대한 데이터 객체)
. 그리고 drop-zone의 변화에 따라 selectedFile이 호출되어 span 태그로 존재하는 dropzoneFile의 이름을 출력해줍니다. 
    - 파일이 인식되면 파일의 이름을 출력, 만약 인식되지 않았다면 파일의 이름이 없으니 공백으로 처리됨.

// DropZone.vue

<template>
  <div 
    @dragenter.prevent="toggleActive" 
    @dragleave.prevent="toggleActive" 
    @dragover.prevent
    @drop.prevent="toggleActive"
    :class="{'active-dropzone': active}"
    class="dropzone"
  >
    <span>Drag or Drop File</span>
    <span>OR</span>
    <label for="dropzoneFile">Select File</label>
    <input type="file" id="dropzoneFile" class="dropzoneFile"/>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'DropZone',
  setup () {
    const active = ref(false)	// 영역 인식 제어용
    const toggleActive = () => {	// 영역 인식 제어용
      active.value = !active.value		
    }
    return { active, toggleActive}
  }
}
</script>

DropZone.vue에 대한 간략한 설명

dashed의 영역

위의 사진처럼 dashed의 영역 안으로 drag file 요소가 인식되면 배경색이 변경될 수 있게 'active' 라는 변수를 선언하고,
    1. 영역 안으로 들어왔을 때 => active: true,  색이 초록색으로 변하도록 변경.
    2. 영역 바깥으로 나가거나 파일을 drop 시켰을 때 => active: false, 색이 흰색으로 돌아가게 변경.
    클래스 바인딩을 통해 active-dropzone 클래스로 active 변수를 바인딩 시켰다.

 

유튜브 강의 

Drag & Drop -MDN 

Drag Operations - Web API | MDN