下面我就为大家分享一篇vue.js实现图片的随意拖动方法，具有很好的参考价值，希望对大家有所帮助。
主要代码如下：
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; } } } }
![Vue.js实现图片的随意拖动方法]()
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
立即学习“前端免费学习笔记（深入）”；
layui之select的option叠加问题的解决方法
Vue.js自定义事件的表单输入组件方法
vue注册组件的几种方式总结
以上就是Vue.js实现图片的随意拖动方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752744.html
