Wie erkennt Vue.js, dass Bilder nach Belieben gezogen und platziert werden können?

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

Empfohlene Lektüre:

Dieses Mal zeige ich Ihnen, wie Sie Bilder nach Belieben ziehen und platzieren können Machen Sie Bilder nach Belieben. Was sind die Vorsichtsmaßnahmen für das Ziehen und Platzieren?

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:

Wie man mit der Optionsüberlagerung von select umgeht

Wie man die CSS-Bibliothek in Vue importiert .js

Das obige ist der detaillierte Inhalt vonWie erkennt Vue.js, dass Bilder nach Belieben gezogen und platziert werden können?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!