图片拖动及鼠标滚轮放大

思路讲图片设置为背景图进行设置拖动和旋转
html部分

image.png

js部分

//图片拖动
move(e) {
      let odiv = e.target; //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = e => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        //移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = e => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
// 滚轮放大缩小
handleZoomImg(e) {
      this.isPreview = true;
      console.log("鼠标滚动了", e);
      e = e || window.event;

      // 火狐下没有wheelDelta，用detail代替，由于detail值的正负和wheelDelta相反，所以取反
      e.delta = e.wheelDelta || -e.detail;

      e.preventDefault();
      if (e.delta > 0) {
        //当滑轮向上滚动时
        this.scaleFunc(2);
      }
      if (e.delta < 0) {
        //当滑轮向下滚动时
        this.scaleFunc(-2);
      }
    }

css样式

.move-position {
  position: relative; /*定位*/
  top: 20px;
  left: 0px;
  z-index: 66;
}