用vue做的跟随鼠标移动的div
程序员文章站
2022-03-27 08:57:34
...
1、最近接到一个任务，就是在既存用electron-vue开发的桌面端程序上追加随鼠标移动的动画效果，之前一直使用angular和react，没怎么接触过vue，先做一个vue的简单例子，然后再整合。
2、程序比较简单，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue学习</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
.drag{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: red;
background: url(at-all.png);
background-size: cover;
}
.drag:hover{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
cursor:pointer;
background-color: red;
background: url(at-all.png);
background-size: cover;
}
</style>
</head>
<div id="app1" v-drag class="drag"></div>
<script>
// 拖动div元素
let vm1 = new Vue({
el:'#app1',
// 自定义指令
directives:{
drag(el, bindings){
el.onmousedown = function(e){
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
document.onmousemove = function (e){
el.style.left = e.pageX - disx + 'px';
el.style.top = e.pageY - disy + 'px';
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
}
}
}
})
</script>
</body>
</html>
3、代码可以正常运行，想用的朋友，自己COPY下来执行就好。