javascript - vuejs的拖拽实现
本文介绍了javascript - vuejs的拖拽实现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
想用h5的drag实现拖拽,drop时，没有出现对应的console，求大神解释
代码如下
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<style type="text/css">
div{
width: 100px;
background-color: red;
height: 100px;
}
li{
width: 400px;
height: 300px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div id="box" draggable="true" @dragstart='drag($event)'></div>
<ul>
<li
v-for="(item, index) in list"
:style="item.styleObj"
@drop='drop($event)'
@dragover='allowDrop($event)'
>{{item.id}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
list:[
{
id:'001',styleObj:{background:'url(img/1.jpg)'}
}
]
},
methods:{
drag(e){
console.log(e.currentTarget.offsetTop)
},
drop(e){
console.log('drop')
},
allowDrop(){
console.log('allowDrop')
}
}
})
</script>
</body>
</html>解决方案
设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽.
监听dragstart设置拖拽数据
为拖拽操作设置反馈图标(可选)
设置允许的拖放效果,如copy,move,link
设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.
监听drop事件执行所需操作
你的代码改成这样就能触发了
allowDrop(e){
e.preventDefault();
console.log('allowDrop')
}这篇关于javascript - vuejs的拖拽实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
