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

此处需要注意的是

我们在移动图片时,需要通过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%;
}
}
}
}
}

原文地址: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 ...