Vue.js implémente la méthode de glissement aléatoire des images

Maintenant, je vais partager avec vous une méthode Vue.js pour réaliser un glissement aléatoire d'images. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Les principaux codes sont les suivants :

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

Ce qui précède est ce que J'ai compilé pour vous, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Solution au problème de superposition d'options de sélection dans layui

Événement personnalisé Vue.js Entrée de formulaire méthode des composants

Un résumé de plusieurs façons d'enregistrer des composants avec vue

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!