Heim  >  Artikel  >  Web-Frontend  >  Vue.js implementiert die Methode zum zufälligen Ziehen von Bildern

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

亚连
亚连Original
2018-05-31 16:40:422626Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn