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

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
}

  
Drag & Drop