原生JS使用类实现图片拖拽，缩放等功能

在需要展示图片的dom元素内生效

   const viewer = new Viewer(Htmlelement);

export class Viewer {
  dom;
  container;
  image;

  scale = 0.5;

  width = 0;
  height = 0;
  scaleWidth = 100;
  sacleHeight = 100;
  top = 0;
  left = 0;

  mouseX = 0;
  mouseY = 0;
  startX = 0;
  startY = 0;

  imageX = 0;
  imageY = 0;

  drag = false;

  constructor(dom) {
    console.log(dom);
    const width = dom.offsetWidth;
    const height = dom.offsetHeight;
    console.log({ width, height });
    const container = document.createElement("div");

    container.style.width = "100%";
    container.style.height = "100%";
    container.style.background = "gainsboro";
    container.style.position = "relative";
    container.style.overflow = "hidden";

    dom.appendChild(container);
    this.width = width;
    this.height = height;
    this.container = container;
    this.dom = dom;

    // resize
    window.addEventListener("resize", () => {
      this.resize();
    });

    // addevemt
    container.addEventListener("mousedown", (e) => {
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.drag = true;
    });
    container.addEventListener("mousemove", (e) => {
      this.mouseX = e.clientX;
      this.mouseY = e.clientY;
    });
    container.addEventListener("mouseup", () => {
      this.drag = false;
      if (this.image) {
        console.log(this.image.style.left);
        this.imageY += this.top;
        this.imageX += this.left;
      }
    });

    container.addEventListener("mouseleave", () => {
      this.drag = false;
      if (this.image) {
        this.imageY += this.top;
        this.imageX += this.left;
      }
    });

    // 滚轮缩放
    container.addEventListener("wheel", (e) => {
      e.preventDefault(); // 阻止事件冒泡

      // 通过event.deltaY判断滚动方向
      if (e.deltaY < 0) {
        if (this.scale < 3) this.setScale(this.scale + 0.1);
      } else if (e.deltaY > 0) {
        if (this.scale > 0.3) this.setScale(this.scale - 0.1);
      }
    });
    const tick = () => {
      this.render();
      requestAnimationFrame(tick);
    };
    tick();

    this.setUrl(
      "https://img.js.design/assets/img/6235db02441fff2959ff0525.jpg"
    );
  }

  // 更新图片位置
  render() {
    if (this.drag) {
      this.left = this.mouseX - this.startX;
      this.top = this.mouseY - this.startY;

      this.image.style.top = this.imageY + this.top + "px";
      this.image.style.left = this.imageX + this.left + "px";
    }
  }

  // window resize
  resize() {
    this.width = this.dom.offsetWidth;
    this.height = this.dom.offsetHeight;
  }

  // 更换图片
  setUrl(url) {
    if (this.image) {
      this.claenImage();
    }
    const image = document.createElement("img");
    image.src = url;
    let top = this.top;
    let left = this.left;
    console.log(this);
    image.style.display = "block";
    image.style.width = this.scaleWidth + "%";
    image.style.height = this.sacleHeight + "%";
    image.style.position = "absolute";
    image.style.top = top + "px";
    image.style.left = left + "px";
    image.style.scale = this.scale;

    image.addEventListener("dragstart", function (event) {
      event.preventDefault();
      // 可以在此添加其他逻辑
    });

    this.image = image;
    this.container.appendChild(image);
  }

  // 重置所有属性
  claenImage() {
    this.container.removeChild(this.image);
    this.image = null;
    this.scale = 0.5;

    this.width = 0;
    this.height = 0;
    this.scaleWidth = 100;
    this.sacleHeight = 100;
    this.top = 0;
    this.left = 0;

    this.mouseX = 0;
    this.mouseY = 0;
    this.startX = 0;
    this.startY = 0;

    this.imageX = 0;
    this.imageY = 0;

    this.drag = false;
  }
  setScale(n) {
    this.scale = n;
    if (this.image) {
      this.image.style.scale = this.scale;
    }
  }
}