基於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