Vue.js implementiert die Methode zum zufälligen Ziehen von Bildern

Jetzt werde ich Ihnen eine Vue.js-Methode vorstellen, mit der Sie das zufällige Ziehen von Bildern realisieren können. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich sein wird.

Der Hauptcode lautet wie folgt:

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

Das Obige habe ich zusammengestellt für alle, ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Lösung für das Optionsüberlagerungsproblem von select in Laui

Vue.js benutzerdefinierte Ereignisformulareingabe Komponentenmethode

Eine Zusammenfassung verschiedener Möglichkeiten, Komponenten bei Vue zu registrieren

Das obige ist der detaillierte Inhalt vonVue.js implementiert die Methode zum zufälligen Ziehen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!