JSFiddle - React, Tailwind, and code Playground

by Damian Dulisz

HTML

<div id="app">
  <div 
    class="dropContainer"
    @drop.prevent="onFileDrop" 
    @dragenter.prevent.stop="dropAreaActive = true" 
    @dragover.prevent.stop="dropAreaActive = true"
    @dragleave.prevent.stop="dropAreaActive = false">
    <h1>
      {{ dropAreaActive ? 'DROP IT' : 'DRAG IT' }}
    </h1>
  </div>
</div>

CSS

.dropContainer {
  height: 300px;
  width: 300px;
  background: #ddd;
  z-index: 1;
  position: relative;
}

h1 {
  pointer-events: none;
  position: relative;
  z-index: -1;
  margin: 0;
  font-family: sans-serif;
  line-height: 300px;
  text-align: center;
}

JavaScript

new Vue({
  data: {
  	dropAreaActive: false
  },
	methods: {
  	onFileDrop (e) {
    	console.log(e)
    }
  }
}).$mount('#app')