Vue

by mizobata

HTML

<div id="app">
  <div 
    id="drop-area" 
    :class="{'over': isOver}"
    @dragover="handleDragOver"
    @dragleave="handleDragLeave"
    @drop="handleDrop"
  >
    Drop here!
  </div>
  <h1>File List</h1>
  <ul v-for="(file, index) in fileList">
    <li>{{ file }}</li>
  </ul>
  
</div>

CSS

#drop-area {
  height: 30px;
  width: 500px;
  border: dotted 2px #ccc;
  text-align: center;
  border-radius: 10px;
  padding: 30px;
}

.over {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

Vue

document.addEventListener('drop', e => {
  e.preventDefault()
  e.stopPropagation()
  console.log(e)
})
document.addEventListener('dragover', e => {
  e.preventDefault()
  e.stopPropagation()
})

new Vue({
  el: "#app",
  data () {
  	return {
    	isOver: false,
      fileList: []
    }
  },
  methods: {
		handleDragOver (e) {
      this.isOver = true
      e.preventDefault()
      e.stopPropagation()
    },
    handleDragLeave () {
      this.isOver = false
    },
    handleDrop (e) {
      e.preventDefault()
      e.stopPropagation()
      
      for (file of e.dataTransfer.files) {
        this.fileList.push(file.name)
      }
      
      this.isOver = false
    }
  }
})