这次给大家带来vue.js怎样让图片随意拖动，vue.js让图片随意拖动的注意事项有哪些，下面就是实战案例，一起来看一下。
主要代码如下：
<template>
<p id="test_3">
<img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style">
</p>
</template>
<script>
export default{
data:function(){
return{
candrag: false,
x0:0,
y0:0,
x1:0,
y1:0,
style:null
}
},
methods:{
start:function(e){
//鼠标左键点击
if(e.button==0){
this.candrag=true;
//记录鼠标指针位置
this.x0=e.clientx;
this.y0=e.clienty;
}
},
stop:function(e){
this.candrag=false;
},
move:function(){
if(this.candrag==true){
this.x1=e.clientx;
this.y1=e.clientx;
let x=this.x1-this.x0;
let y=this.y1-this.y0;
let img=document.queryselector(#test_3 img);
this.style=`left:${img.offsetleft+x}px;top:${img.offsettop+y}px`;
this.x0=this.x1;
this.y0=this.y1;
}
}
}
}
</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
在vue里如何使用xe-utils
vue-router进行build时不显示路由页面怎么处理
以上就是vue.js怎样让图片随意拖动的详细内容。