使用事件委托实现图片移动及缩放功能

该文章为个人纪录，如有错误请指正

问题及解决：

拖住会将图片文件拖出

  $(imgview).on("dragstart", function (e) {
    e.preventDefault();
  });

 被拖出后解除该事件

多次拖拽放大缩小后出现移动误差

    let mousex = e.originalEvent.clientX;
    let mousey = e.originalEvent.clientY;
    const sx = transform.x;
    const sy = transform.y;


    let mousex2 = ei.originalEvent.clientX;
    let mousey2 = ei.originalEvent.clientY;

通过两层事件计算移动的数值，具体可看下方完整代码逻辑

封装代码

var transform = { x: 0, y: 0, scale: 1 };

// 初始化
function init(imgview) {
  transform = { x: 0, y: 0, scale: 1 };
  settransform(imgview);
}

function moveimageinit(imgdialog, imgview) {
  init(imgview);
  $(imgview).on("dragstart", function (e) {
    e.preventDefault();
  });

  var move = false;
  $(imgdialog).mousedown(function (e) {
    move = true;
    let mousex = e.originalEvent.clientX;
    let mousey = e.originalEvent.clientY;
    const sx = transform.x;
    const sy = transform.y;
    $(imgdialog).mousemove(function (ei) {
      if (move) {
        let mousex2 = ei.originalEvent.clientX;
        let mousey2 = ei.originalEvent.clientY;
        //   console.log(mousex2, mousey2);
        transform.x = sx + mousex2 - mousex;
        transform.y = sy + mousey2 - mousey;
        settransform(imgview);
      }
    });
  });
  $(imgdialog).on("mousewheel", function (e) {
    if (e.originalEvent.wheelDelta > 0) {
      transform.scale += 0.1;
    } else {
      transform.scale -= 0.1;
    }
    if (transform.scale < 0.5) {
      transform.scale = 0.5;
    }
    if (transform.scale > 5) {
      transform.scale = 5;
    }
    settransform(imgview);
  });
  $(imgdialog).on("dblclick", function (e) {
    transform.scale += 0.5;
    if (transform.scale > 2) {
      transform.scale = 2;
    }
    settransform(imgview);
  });

  $(imgdialog).mouseup(function () {
    move = false;
  });
}

// 设置transform
function settransform(imgview) {
  $(imgview).css({
    transform:
      "translate(" +
      transform.x +
      "px, " +
      transform.y +
      "px) scale(" +
      transform.scale +
      ")",
  });
}

// 清除事件
function clearmoveimage(imgdialog) {
  $(imgdialog).off("mousedown");
  $(imgdialog).off("mousemove");
  $(imgdialog).off("mouseup");
  $(imgdialog).off("mousewheel");
}

调用方法：

    // 样式代码
    <style>
      .img-dialog-view-class {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #00000099;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .close-button {
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 10px 20px;
        background-color: cornflowerblue;
        border-radius: 5px;
        color: #fff;
        z-index: 5;
        cursor: pointer;
      }
    </style>


    // html代码
    <div class="img-dialog-view-class" id="imgdialog">
      <div class="close-button">关闭</div>
      <img src="./demo.png" alt="" id="imgview" />
    </div>


    // js代码
    var imgdialog = "#imgdialog";
    var imgview = "#imgview";


    $(".button-class").click(function (e) {
        $(imgdialog).show();
        moveimageinit(imgdialog, imgview);
    })


    $(".close-button").click(function () {
      $(imgdialog).hide();
      // 清除事件
      clearmoveimage(imgdialog);
    });

因为页面还有其他内容，只将关键代码摘出

如需帮助可直接私信

QQ：929477145