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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
Vue使用NPM方式搭建项目
Oct 25 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
jquery简单体验
2007/01/10 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
利用Python求阴影部分的面积实例代码
2018/12/05 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python类中self参数用法详解
2020/02/13 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
室内设计专业自荐信
2014/05/31 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android