Wie realisiert Vue.js die Funktion, Bilder nach Belieben zu ziehen?

Dieses Mal zeige ich Ihnen, wie Sie die Funktion zum Ziehen von Bildern nach Belieben in Vue.js implementieren. Welche Vorsichtsmaßnahmen gibt es, um die Funktion zum Ziehen von Bildern nach Belieben in Vue zu implementieren? .js. Das Folgende ist die tatsächliche Praxis.

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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!

Empfohlene Lektüre:

So registrieren Sie die globale Komponente von Vue

So verwenden Sie vue2.0axios domänenübergreifend und Rendern

Das obige ist der detaillierte Inhalt vonWie realisiert Vue.js die Funktion, Bilder nach Belieben zu ziehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!