Vue.js实现图片的随意拖动方法


Posted in Javascript onMarch 08, 2018

主要代码如下:

<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: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实现图片的随意拖动方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
JS 继承实例分析
Nov 04 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
原生javascript获取元素样式
Dec 31 Javascript
javascript实现密码验证
Nov 10 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
浅谈js中对象的使用
Aug 11 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 #Javascript
实战node静态文件服务器的示例代码
Mar 08 #Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 #Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 #Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 #Javascript
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
vue.js中$set与数组更新方法
Mar 08 #Javascript
You might like
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python tkinter事件高级用法实例
2018/01/31 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
利用python画出折线图
2018/07/26 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
优秀民警事迹材料
2014/01/29 职场文书
集体婚礼策划方案
2014/02/22 职场文书
捐助倡议书范文
2014/04/15 职场文书
志愿者活动总结报告
2014/06/27 职场文书
上课玩手机的检讨书
2014/10/01 职场文书