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

当图片比要显示的区域大时，需要将多余的部分隐藏掉，我们可以通过绝对定位来实现，并通过动态修改图片的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