当图片比要显示的区域大时,需要将多余的部分隐藏掉,我们可以通过绝对定位来实现,并通过动态修改图片的left值和top值从而实现图片的移动。具体实现效果如下图,如果我们移动的是div 实现思路相仿。

此处需要注意的是

我们在移动图片时,需要通过draggable="false" 将图片的 <img src="/static/pano-dev/test/image-2.jpg" draggable="false" />,否则按下鼠标监听onmousemove事件时监听不到

然后还需要禁用图片的选中css

  1. /*禁止元素选中*/
  2. -moz-user-select: none; /*火狐*/
  3. -webkit-user-select: none; /*webkit浏览器*/
  4. -ms-user-select: none; /*IE10*/
  5. -khtml-user-select: none; /*早期浏览器*/
  6. user-select: none;

Vue 代码

  1. <style lang="less" scoped>
  2. @import url("./test.less");
  3. </style>
  4. <template>
  5. <div class="page">
  6. <div class="image-move-wapper">
  7. <div class="image-show-box" ref="imageShowBox">
  8. <div class="drag-container" ref="dragContainer" :style="'left:' + dragContainer.newPoint.left+'px; top:' + dragContainer.newPoint.top+'px'" @mousedown="DragContainerMouseDown">
  9. <div class="drag-image-box">
  10. <img src="/static/pano-dev/test/image-2.jpg" draggable="false" />
  11. <div class="point" style="left:10%; top:10%" @mousedown="PointMouseDown"></div>
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. dragContainer: {
  23. box: {
  24. w: 0,
  25. h: 0
  26. },
  27. point: {
  28. left: 0,
  29. top: 0
  30. },
  31. newPoint: {
  32. left: 0,
  33. top: 0
  34. }
  35. },
  36. mousePoint: {
  37. x: 0,
  38. y: 0
  39. },
  40. imageShowBox: {
  41. box: {
  42. w: 0,
  43. h: 0
  44. },
  45. dragcheck: {
  46. h: true,
  47. v: true
  48. }
  49. }
  50. };
  51. },
  52. updated() {
  53. let _this = this;
  54. // 确保DOM元素已经渲染成功,然后获取拖拽容器和显示区域的大小
  55. _this.$nextTick(function() {
  56. _this.dragContainer.box = {
  57. w: _this.$refs.dragContainer.offsetWidth,
  58. h: _this.$refs.dragContainer.offsetHeight
  59. };
  60.  
  61. _this.imageShowBox.box = {
  62. w: _this.$refs.imageShowBox.offsetWidth,
  63. h: _this.$refs.imageShowBox.offsetHeight
  64. };
  65.  
  66. // 判断是否允许拖拽
  67. _this.imageShowBox.dragcheck = {
  68. h: _this.imageShowBox.box.w > _this.dragContainer.box.w ? false : true,
  69. v: _this.imageShowBox.box.h > _this.dragContainer.box.h ? false : true
  70. };
  71. });
  72. },
  73. methods: {
  74. // 鼠标在拖拽容器中按下时触发
  75. DragContainerMouseDown(e) {
  76. const _this = this;
  77. // 记录鼠标点击时的初始坐标
  78. this.mousePoint = {
  79. x: e.clientX,
  80. y: e.clientY
  81. };
  82. _this.dragContainer.point = _this.dragContainer.newPoint;
  83. document.body.onmousemove = _this.DragContainerMouseMove;
  84. document.onmouseup = _this.DragContainerMouseUp;
  85. return false;
  86. },
  87. // 容器拖拽时触发
  88. DragContainerMouseMove(e) {
  89. const _this = this;
  90. // 鼠标偏移量 = 初始坐标 - 当前坐标
  91. let dx = e.clientX - _this.mousePoint.x;
  92. let dy = e.clientY - _this.mousePoint.y;
  93.  
  94. // 获取拖拽容器移动后的left和top值
  95. if (_this.imageShowBox.dragcheck.h)
  96. var newx = dx > 0 ? Math.min(0, _this.dragContainer.point.left + dx) : Math.max(- _this.dragContainer.box.w + _this.imageShowBox.box.w, _this.dragContainer.point.left + dx );
  97. if (_this.imageShowBox.dragcheck.v)
  98. var newy = dy > 0 ? Math.min(0, _this.dragContainer.point.top + dy) : Math.max(- _this.dragContainer.box.h + _this.imageShowBox.box.h, _this.dragContainer.point.top + dy );
  99.  
  100. _this.dragContainer.newPoint = {
  101. left: typeof newx != 'undefined' ? newx : _this.dragContainer.point.left,
  102. top: typeof newy != 'undefined' ? newy : _this.dragContainer.point.top
  103. };
  104. console.log(_this.dragContainer.newPoint);
  105. return false;
  106. },
  107. // 移动完成 取消onmousemove和onmouseup事件
  108. DragContainerMouseUp(e) {
  109. document.body.onmousemove = null;
  110. document.onmouseup = null;
  111. },
  112. PointMouseDown(e) {
  113. //阻止事件冒泡
  114. e.stopPropagation();
  115. }
  116. }
  117. };
  118. </script>

  

样式表

  1. .page {
  2. background: #444;
  3. width: 100%;
  4. height: 100%;
  5. position: relative;
  6. .image-move-wapper {
  7. position: absolute;
  8. right: 50px;
  9. top: 50px;
  10. background: #fff;
  11. box-shadow: rgba(255, 255, 255, 0.5);
  12. padding: 10px;
  13. }
  14. .image-show-box {
  15. height: 400px;
  16. width: 400px;
  17. cursor: move;
  18. overflow: hidden;
  19. position: relative;
  20. .drag-container {
  21. position: absolute;
  22. left: 0px;
  23. top: 0;
  24. /*禁止元素选中*/
  25. -moz-user-select: none; /*火狐*/
  26. -webkit-user-select: none; /*webkit浏览器*/
  27. -ms-user-select: none; /*IE10*/
  28. -khtml-user-select: none; /*早期浏览器*/
  29. user-select: none;
  30. .drag-image-box {
  31. position: relative;
  32. .point {
  33. position: absolute;
  34. background: red;
  35. height: 30px;
  36. width: 30px;
  37. border-radius: 50%;
  38. }
  39. }
  40. }
  41. }
  42. }

原文地址:http://jiojun.com/Article/Detail?articleId=17

基于Vue实现图片在指定区域内移动的更多相关文章

  1. 基于vue的图片查看插件vue-photo-preview

    1. 安装 在任务管理器中输入命令 2. 在项目main.js中引入 3.在所需要的项目中直接使用 还有两个属性,可以看需求添加 preview-title-enable="false&qu ...

  2. 通过base64实现图片下载功能(基于vue)

    1. 使用场景 当我们处理图片下载功能的时候,如果本地的图片,那么是可以通过canvas获得图片的base64的,方法如下.但是如果图片的url存在跨域问题的话,下面的方法将行不通,这时候我们可以另辟 ...

  3. 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结

    基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...

  4. 一个基于vue的仪表盘demo

    最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...

  5. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

    基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...

  6. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  7. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  8. 基于Vue实现后台系统权限控制

    原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...

  9. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

随机推荐

  1. FunDA(11)- 数据库操作的并行运算:Parallel data processing

    FunDA最重要的设计目标之一就是能够实现数据库操作的并行运算.我们先重温一下fs2是如何实现并行运算的.我们用interleave.merge.either这几种方式来同时处理两个Stream里的元 ...

  2. Java并发工具类之同步屏障CyclicBarrier

    CyclicBarrier的字面意思是可以循环使用的Barrier,它要做的事情是让一个线程到达一个Barrier的时候被阻塞,直到最后一个线程到达Barrier,屏障才会放开,所有被Barrier拦 ...

  3. zookeeper集群环境搭建详细图文教程

    zookeeper集群环境搭建详细图文教程 zhoubang @ 2018-01-02 [文档大纲] 友情介绍 软件环境 注意点 环境安装 1. 新建用于存储安装包以及软件安装的目录 2. 下载安装z ...

  4. spring定时任务的注解实现方式

    STEP 1:在spring配置文件中添加相应配置,以支持定时任务的注解实现 (一)在xml里加入task的命名空间 <!-- beans里添加:--> xmlns:task=" ...

  5. day 42 mysql 数据库(2)

    前情提要: 本节继续学习数据库   一:ddl 创建表 >字段名 >数据类型 >约束规则 >显示建表语句 修改表: 二:数据类型 >数值类型 >小数类型 >字 ...

  6. 【CODECHEF】Children Trips 倍增

    此题绝了,$O(n^{1.5}\ log\ n)$都可以过掉.... 题目大意:给你一颗$n$个点的树,每条边边权不是2就是$1$,有$m$个询问,每次询问一个人从$x$点走到$y$点,每天可以走的里 ...

  7. Oracle 数据库维护管理之--dbms_lock

    1.查询相关的v$视图,但是提示表或视图不存在解决办法     原因是使用的用户没有相关的查询权限导致 解决办法: grant select  any dictionary to 用户;    --这 ...

  8. sql返回行id

    1.sql语句中 insert into tableName() output inserted.id values() 2 .存储过程中 ALTER PROCEDURE dbo.getBuyMedi ...

  9. Docker运行操作系统环境(BusyBox&Alpine&Debian/Ubuntu&CentOS/Fedora)

    目前常用的Linux发行版主要包括Debian/Ubuntu系列和CentOS/Fedora系列.前者以自带软件包版本较新而出名:后者则宣称运行更稳定一些.选择哪个操作系统取决于读者的具体需求.同时, ...

  10. Android应用博客目录

    应用有很多,开个博客都放进来方便查找,也方便修改 1 语言类: 1.1 JAVA 基础语言知识JAVA Collection与Collections,Array与Arrays的区别 JAVA练手--S ...