我想在 vue js 中使用 html 5 拖放。
我看到 w3schools 关于拖放的教程。
它适用于一个简单的 html 文件，但不适用于我的 vue 项目
我的教程代码和链接是:
w3schools - 拖动:https://www.w3schools.com/jsref/event_ondrag.asp
我的错误说:
未捕获的 ReferenceError:未定义 allowDrop
我在 vue js 的方法范围内定义了所有方法。
最佳答案
你只需要调用 vue 事件而不是 html 事件 v-on:drop而不是 drop例如
这是您在与 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>关于javascript - 在没有组件的vue js中拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56167681/