Comment faire glisser librement les images avec Vue.js

Cette fois, je vais vous montrer comment Vue.js permet de faire glisser les images à volonté. Quelles sont les précautions pour que Vue.js permette de faire glisser les images à volonté. Voici un cas pratique. Jetons un coup d’œil.

Le code principal est le suivant :

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. des choses plus excitantes, veuillez faire attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment utiliser xe-utils dans vue

vue-router n'affiche pas les itinéraires lors de la construction Comment gérer la page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!