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.
you just need to call the vue event not the html event v-on:drop instead of drop for example
here is the implementation of the example you provided in the link with vue
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</style>
</head>
<body>
<div id="app">
<p>Drag the p element back and forth between the two rectangles:</p>
<div
class="droptarget"
v-on:drop="drop"
v-on:dragover="allowDrop"
>
<p
v-on:dragstart="dragStart"
v-on:drag="dragging"
draggable="true"
id="dragtarget"
>
Drag me!
</p>
</div>
<div
class="droptarget"
v-on:drop="drop"
v-on:dragover="allowDrop"
></div>
<p style="clear:both;">
<strong>Note:</strong> drag events are not supported in Internet
Explorer 8 and earlier versions or Safari 5.1 and earlier versions.
</p>
<p id="demo"></p>
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
dragStart:function(event) {
event.dataTransfer.setData("Text", event.target.id);
},
dragging:function(event) {
document.getElementById("demo").innerHTML =
"The p element is being dragged";
},
allowDrop:function(event) {
event.preventDefault();
},
drop:function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML =
"The p element was dropped";
}
}
});
</script>
</body>
</html>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>
