SoFunction
Updated on 2025-04-04

Implement the random drag method of pictures

The main code is as follows:

<template>
 <div >
  <img src="../assets/img/" @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){
    //Click the left mouse button    if(==0){
     =true;
     //Record the mouse pointer position     this.x0=;
     this.y0=;
    }
   },
   stop:function(e){
    =false;
   },
   move:function(){
    if(==true){
     this.x1=;
     this.y1=;
     let x=this.x1-this.x0;
     let y=this.y1-this.y0;
     let img=("#test_3 img");
     =`left:${+x}px;top:${+y}px`;
     this.x0=this.x1;
     this.y0=this.y1;
    }
   }
  }
 }
</script>

The above method of dragging pictures at will is all the content I share with you. I hope you can give you a reference and I hope you can support me more.