基于Vue实现图片在指定区域内移动

番茄西红柿发布于2019-04-23 13:12 / 1079人阅读

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

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

此处需要注意的是

我们在移动图片时，需要通过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 代码

样式表

.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

私有云混合云基于腾讯云实现移动直播指定区域外打印指定区域 js打印指定区域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1571.html

vue-avatar-tailor，vue头像裁剪组件

摘要：实现原理简单，纯技术处理图片，几乎不需要用到相关知识面向人群急于使用头像裁剪组件的同学。裁剪框初始宽高上传图片后，裁剪区将预设为最大裁剪范围。支持矩形裁剪目前九宫仅支持将图片裁剪为正方形，不能裁剪为矩形，该功能将在后续优化。项目简介本组件是vue下的头像裁剪组件，可以直接拷贝代码使用，无需安装依赖使用九宫格进行裁剪，自由选择裁剪区域。实时预览裁剪后效果。可以将裁剪好的图片，...

imccl 2019-08-23 12:13 评论0 收藏0
CSS background系列属性

摘要：通过该属性可以控制绘制的区域。背景图片相关的属性背景图片本身是有自身尺寸的，被应用元素也有自己的尺寸。通过属性可以修改原点位置。坐标系的反方向都是重复方式绘制。该位置是相对于原点构建的坐标系，默认情况下该位置就是在原点。一、元素背景是指哪些区域默认情况下元素的背景是指元素border（包含border）以内的区域。 showImg(https://segmentfault.com/...

mrcode 2019-08-29 17:30 评论0 收藏0
Vue仿饿了么app项目总结

摘要：前言这是我第一个基于的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。即将属性和请求返回数据对象合并到空对象，然后赋值给这里加上即提供了一种可扩展的机制，倘若原来的属性中有预定义的其他属性。前言这是我第一个基于 Vue 的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。源代码：ht...

FrozenMap 2019-08-26 11:47 评论0 收藏0
面试官(6): 写过『通用前端组件』吗?

摘要：很久没上掘金发现草稿箱里存了好几篇没发的文章最近梳理下发出来往期面试官系列如何实现深克隆面试官系列的实现面试官系列前端路由的实现面试官系列基于数据劫持的双向绑定优势所在面试官系列你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测很久没上掘金,发现草稿箱里存了好几篇没发的文章,最近梳理下发出来往期面试官系列(1): 如何实现深克隆面试官系列(2): Event Bus...

waltr 2019-05-27 17:43 评论0 收藏0
干货--手把手撸vue移动UI框架：滑动加载

摘要：前言在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的这个组件其实可以很简单的就实现出来，而且体验也能非常的棒当然我们没有实现下拉刷新功能下面我们就一起来实现这个组件。前言在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的！！这个组件其实可...

Harpsichord1207 2019-08-22 15:17 评论0 收藏0