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

Vue.js实现图片的随意拖动方法,第1张

下面我就为大家分享一篇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>

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

layui之select的option叠加问题的解决方法

Vue.js自定义事件的表单输入组件方法

vue注册组件的几种方式总结

以上就是Vue.js实现图片的随意拖动方法的详细内容,更多请关注php中文网其它相关文章!

文章来源:https://www.php.cn/faq/399556.html

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复