drag and drop in vue js without component

Question

I want to use html 5 drag and drop in vue js .

I see the w3schools tutorial about drag and drop . It works in a simple html file but doesn't work in my vue project

My tutorials code and link is : w3schools - drag : https://www.w3schools.com/jsref/event_ondrag.asp and my error says : Uncaught ReferenceError: allowDrop is not defined

I define all methods in method scope in vue js.

Answer 1

You can use @dragover.prevent along with @drop.stop.prevent to prevent web browsers default behavior (like opening the files).

You can go and check the documentation about events handling if you want more details : VueJS Event Handling Documentation

Here is an example of how you could implement a basic drag & drop :

new Vue({
  el: "#app",
  methods: {
    // Will be fired by our '@drop.stop.prevent'; in this case, when a file is dropped over our app
    onDrop(event) {
      const file = event.dataTransfer.files[0];

      // Do something with the dropped file
      console.log(file)
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

p {
  text-align: center
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app" @dragover.prevent @drop.stop.prevent="onDrop">
  <p>Drag & Drop</p>
</div>