Vue.js實現圖片的隨意拖動方法，vue.js實現拖動

Vue.js實現圖片的隨意拖動方法，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實現圖片的隨意拖動方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。