这篇文章主要为大家详细介绍了Vue.js实现图片的随意拖动方法,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
代码如下:
<template>
<div id="test_3">
<img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style">
</div>
</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.js实现图片的随意拖动方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/4400-0.html
注:关于Vue.js实现图片的随意拖动方法的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。