Vue.js实现图片的随意拖动
2018-01-23 19:40
495 查看
主要代码如下:
<template> <div id="test_3"> <img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> </div> </template> <script> export default{ data:function(){ return{ canDrag: false, x0:0, y0:0, x1:< 9baa span class="hljs-number">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>
相关文章推荐
- Vue.js实现图片的随意拖动方法
- vue.js 图片上传并预览及图片更换功能的实现代码
- 基于vue.js实现图片轮播效果
- android Matrix实现图片随意放大缩小或拖动
- Android实现图片随意拖动、缩放
- js 实现图片位置随意变化
- 基于vue.js实现图片轮播效果
- JS实现拖动图片
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- vue+cropperjs实现图片剪裁,上传七牛云
- js实现图片滚轮放大缩小以及鼠标拖动
- DIV+CSS+JS实现的可以随意拖动的网页布局
- JS随意拖动图片
- 在Vue中使用sortable.js实现拖动效果并保存拖动数据
- VUE实现可随意拖动的弹窗组件
- 【荐】JS实现的图片弹性拖动特效代码
- js网页中随意拖动的小方块实现代码
- 模拟Launcher中SliderView的滑动操作以及可随意拖动图片的实现
- js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器