Vue

by WILLIAM CORREA

HTML

<div id="app">
  <pre>{{ dragging }}</pre>
  <div
    class="drop-area"
    @dragover="allowDrop($event)"
    @dragenter="dragOn($event)"
    @dragstart="dragOn($event)"
    @dragleave="dragOff($event)"
    @dragend="dragOff($event)"
    @dragexit="dragOff($event)"
    @drop="onDrop($event)"
  >
    área de drop
  </div>
</div>

CSS

.drop-area {
  width: 400px;
  height: 400px;
  background-color: red;
}

Vue

new Vue({
  el: "#app",
  data: {
    dragging: false,
  },
  methods: {
    allowDrop: function (event) {
    	console.log('~> allowDrop')
      event.preventDefault();
    },
    dragOn: function (event) {
    	console.log('~> dragOn')
      this.dragging = true
    },
    dragOff: function (event) {
    	console.log('~> dragOff')
      this.dragging = false
    },
    onDrop: function (event) {
    	console.log('~> onDrop')
      event.preventDefault();
      this.dragging = false
    }
  }
})