当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue.js实现图片的随意拖动方法

Vue.js实现图片的随意拖动方法

2018年03月18日  | 移动技术网IT编程  | 我要评论

穿网球裙的英语老师,首席新娘调包了,陈若琳

主要代码如下：

<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实现图片的随意拖动方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网