主要代码如下：
<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>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
layui之select的option叠加问题的解决方法
vue.js自定义事件的表单输入组件方法
vue注册组件的几种方式总结
以上就是vue.js实现图片的随意拖动方法的详细内容。