基于Vue实现图片在指定区域内移动的思路详解


Posted in Javascript onNovember 11, 2018

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

基于Vue实现图片在指定区域内移动的思路详解

此处需要注意的是

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

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

/*禁止元素选中*/
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;

Vue 代码

<style lang="less" scoped>
@import url("./test.less");
</style>
<template>
 <div class="page">
  <div class="image-move-wapper">
   <div class="image-show-box" ref="imageShowBox">
    <div class="drag-container" ref="dragContainer" :style="'left:' + dragContainer.newPoint.left+'px; top:' + dragContainer.newPoint.top+'px'" @mousedown="DragContainerMouseDown">
     <div class="drag-image-box">
      <img src="/static/pano-dev/test/image-2.jpg" draggable="false" />
      <div class="point" style="left:10%; top:10%" @mousedown="PointMouseDown"></div>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
export default {
 data() {
  return {
   dragContainer: {
    box: {
     w: 0,
     h: 0
    },
    point: {
     left: 0,
     top: 0
    },
    newPoint: {
     left: 0,
     top: 0
    }
   },
   mousePoint: {
    x: 0,
    y: 0
   },
   imageShowBox: {
    box: {
     w: 0,
     h: 0
    },
    dragcheck: {
     h: true,
     v: true
    }
   }
  };
 },
 updated() {
  let _this = this;
  // 确保DOM元素已经渲染成功,然后获取拖拽容器和显示区域的大小
  _this.$nextTick(function() {
   _this.dragContainer.box = {
    w: _this.$refs.dragContainer.offsetWidth,
    h: _this.$refs.dragContainer.offsetHeight
   };
   _this.imageShowBox.box = {
    w: _this.$refs.imageShowBox.offsetWidth,
    h: _this.$refs.imageShowBox.offsetHeight
   };
   // 判断是否允许拖拽
   _this.imageShowBox.dragcheck = {
    h: _this.imageShowBox.box.w > _this.dragContainer.box.w ? false : true,
    v: _this.imageShowBox.box.h > _this.dragContainer.box.h ? false : true
   };
  });
 },
 methods: {
  // 鼠标在拖拽容器中按下时触发
  DragContainerMouseDown(e) {
   const _this = this;
   // 记录鼠标点击时的初始坐标
   this.mousePoint = {
    x: e.clientX,
    y: e.clientY
   };
   _this.dragContainer.point = _this.dragContainer.newPoint;
   document.body.onmousemove = _this.DragContainerMouseMove;
   document.onmouseup = _this.DragContainerMouseUp;
   return false;
  },
  // 容器拖拽时触发
  DragContainerMouseMove(e) {
   const _this = this;
   // 鼠标偏移量 = 初始坐标 - 当前坐标
   let dx = e.clientX - _this.mousePoint.x;
   let dy = e.clientY - _this.mousePoint.y;
   // 获取拖拽容器移动后的left和top值
   if (_this.imageShowBox.dragcheck.h)
    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 );
   if (_this.imageShowBox.dragcheck.v)
    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 );
   _this.dragContainer.newPoint = {
    left: typeof newx != 'undefined' ? newx : _this.dragContainer.point.left,
    top: typeof newy != 'undefined' ? newy : _this.dragContainer.point.top
   };
   console.log(_this.dragContainer.newPoint);
   return false;
  },
  // 移动完成 取消onmousemove和onmouseup事件
  DragContainerMouseUp(e) {
   document.body.onmousemove = null;
   document.onmouseup = null;
  },
  PointMouseDown(e) {
   //阻止事件冒泡
   e.stopPropagation();
  }
 }
};
</script>

样式表

.page {
 background: #444;
 width: 100%;
 height: 100%;
 position: relative;
 .image-move-wapper {
  position: absolute;
  right: 50px;
  top: 50px;
  background: #fff;
  box-shadow: rgba(255, 255, 255, 0.5);
  padding: 10px;
 }
 .image-show-box {
  height: 400px;
  width: 400px;
  cursor: move;
  overflow: hidden;
  position: relative;
  .drag-container {
   position: absolute;
   left: 0px;
   top: 0;
   /*禁止元素选中*/
   -moz-user-select: none; /*火狐*/
   -webkit-user-select: none; /*webkit浏览器*/
   -ms-user-select: none; /*IE10*/
   -khtml-user-select: none; /*早期浏览器*/
   user-select: none;
   .drag-image-box {
    position: relative;
    .point {
     position: absolute;
     background: red;
     height: 30px;
     width: 30px;
     border-radius: 50%;
    }
   }
  }
 }
}

总结

以上所述是小编给大家介绍的基于Vue实现图片在指定区域内移动的思路详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 #Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 #Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 #Javascript
AngularJS上传文件的示例代码
Nov 10 #Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 #Javascript
优雅的在React项目中使用Redux的方法
Nov 10 #Javascript
Vue组件之单向数据流的解决方法
Nov 10 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
php如何连接sql server
2015/10/16 PHP
php英文单词统计器
2016/06/23 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
python实现连续图文识别
2018/12/18 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Python中最大递归深度值的探讨
2019/03/05 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
2016年班主任新年寄语
2015/08/18 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
Python绘制散乱的点构成的图的方法
2022/04/21 Python