The main code is as follows:
<template> <div > <img src="../assets/img/" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> </div> </template> <script> export default{ data:function(){ return{ canDrag: false, x0:0, y0:0, x1:0, y1:0, style:null } }, methods:{ start:function(e){ //Click the left mouse button if(==0){ =true; //Record the mouse pointer position this.x0=; this.y0=; } }, stop:function(e){ =false; }, move:function(){ if(==true){ this.x1=; this.y1=; let x=this.x1-this.x0; let y=this.y1-this.y0; let img=("#test_3 img"); =`left:${+x}px;top:${+y}px`; this.x0=this.x1; this.y0=this.y1; } } } } </script>
The above method of dragging pictures at will is all the content I share with you. I hope you can give you a reference and I hope you can support me more.