How does Vue.js realize the function of dragging pictures at will?

This time I will show you how to implement the function of dragging pictures at will with Vue.js. Pictures What are the precautions for Vue.js to realize the function of dragging pictures at will? The following is the actual combat Let’s take a look at the case.

The main code is as follows:

<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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the PHP Chinese website article!

Recommended reading:

useHow to register Vue’s global components

How to use vue2.0axios cross-domain and rendering

The above is the detailed content of How does Vue.js realize the function of dragging pictures at will?. For more information, please follow other related articles on the PHP Chinese website!