js拖拽平移缩放图片

      const img = document.querySelector('.image')
      const parent = img.parentNode
      const circle = {
        l: 5,
        r: parent.offsetWidth,
        t: 5,
        b: parent.offsetHeight
      }
      const {l, r, t, b} = circle
// 拖拽平移
       // 如果需要区分点击还是拖动
       /* let self = this
       obj.onmouseup = function (event) { // 判断点击或拖动
       if (self.isDrag) {
         self.isDrag = false
       } else {
         clearTimeout(self.timeHandle) // 清除延时设置isDrag=true
         if (event.button === 0) { // 0：左击；2：右击
            self.allScreen()
          }
         }
       */ }
      img.onmousedown = function (event) {    // 鼠标被按下
        //如果需要区分点击还是拖动
        // self.isDrag = false
        // self.timeHandle = setTimeout(self.setDragTrue, 200) // 200ms后设置isDrag=true
        event = event || window.event
        event.preventDefault()
        // div的水平偏移量  鼠标.clentX-元素.offsetLeft
        // div的垂直偏移量  鼠标.clentY-元素.offsetTop
        const ol = event.clientX - img.offsetLeft
        const ot = event.clientY - img.offsetTop
        // 绑定鼠标移动事件
        document.onmousemove = function (event) {
          event = event || window.event
          let slideLeft = event.clientX - ol
          let slideTop = event.clientY - ot
// 边界限制
          let right = obj.offsetWidth / 2 + r - l
          let left = -obj.offsetWidth / 2 + l
          let top = -obj.offsetHeight / 2 + t
          let bottom = obj.offsetHeight / 2 + b - t
          if (slideLeft <= left) {
            slideLeft = left
          }
          if (slideLeft >= right) {
            slideLeft = right
          }
          if (slideTop <= right) {
            slideTop = right
          }
          if (slideTop >= bottom) {
            slideTop = bottom
          }
          img.style.left = slideLeft + 'px'
          img.style.top = slideTop + 'px'
        }
        // 为document绑定一个鼠标松开事件
        document.onmouseup = function () {
          // 当鼠标松开时，被拖拽元素固定在当前位置
          // 取消document.onmousemove事件
          document.onmousemove = null
          document.onmouseup = null
        }
      }
// 缩放
      let eventType = navigator.userAgent.indexOf('Firefox') < 0 ? 'mousewheel' : 'DOMMouseScroll'
      img.addEventListener(eventType , this.onMouseScroll)

          const img = new Image()
          const self = this
          img.onload = function () {
            self.originalWidth = img.width
            self.originalHeight = img.height
          }

onMouseScroll (e) { // 鼠标滚动放大缩小
    const wheel = e.wheelDelta || -e.detail // 火狐浏览器用e.detail
    const delta = Math.max(-1, Math.min(1, wheel))
    if ((this.sizePercent >= 1000 && delta > 0) || (this.sizePercent < 2 && delta < 0)) return // 限制1%-1000%
    if (delta < 0) { // 向下滚动
      $(e.target).width($(e.target).width() / 1.1)
      $(e.target).height($(e.target).height() / 1.1)
    } else { // 向上滚动
      $(e.target).width($(e.target).width() * 1.1)
      $(e.target).height($(e.target).height() * 1.1)
    }
    const percent = parseInt($(e.target).width() / this.originalWidth * 100)
    this.sizePercent = percent > 1000 ? 1000 : percent
  }
setDragTrue () {
    this.isDrag = true
  }