vue element-ui实现图片鼠标控制图片移动

 

clickThumbHandler(e) {
  e.stopImmediatePropagation();
  this.cursorDown = true;
  this.move = null
  this.downPos = {
    x: 0,
    y: 0
  }
  on(document, 'mousemove', this.mouseMoveDocumentHandler);
  on(document, 'mouseup', this.mouseUpDocumentHandler);
},
mouseMoveDocumentHandler(e) {
  const step = 15
  const wrap = this.$refs.scrollbar.$refs.wrap
  if(this.cursorDown) {
    if(!this.move) {
      this.move = {
        dx: e.clientX - this.downPos.x,
        dy: e.clientY - this.downPos.y
      }
    } else {
      if(this.move.dx > e.clientX - this.downPos.x) {
        this.downPos.x = this.cachePos.x
      }
      if(this.move.dy > e.clientY - this.downPos.y) {
        this.downPos.y = this.cachePos.y
      }

      this.cachePos = {
        x: e.clientX,
        y: e.clientY
      }
      this.move = {
        dx: e.clientX - this.downPos.x,
        dy: e.clientY - this.downPos.y
      }
    }
    const stepX = this.move.dx > 0 ? step : -step
    const stepY = this.move.dy > 0 ? step : -step
    wrap.scrollLeft = Math.max(0, Math.min(wrap.scrollLeft + stepX, wrap.scrollWidth - wrap.clientWidth))
    wrap.scrollTop = Math.max(0, Math.min(wrap.scrollTop + stepY, wrap.scrollHeight - wrap.clientHeight))
  }
},
mouseUpDocumentHandler(e) {
  this.moveFlag = false
  this.cursorDown = false
  off(document, 'mousemove', this.mouseMoveDocumentHandler);
}