Heim > Artikel > Web-Frontend > 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!