使用transform位移后对定位的影响

• 最近在搞一个祝福板

页面大概是这样的...

• dialog是自己封装的

蒙层中间的盒子用了transform translate来定位到元素中间的。

然后我要实现拖拽盒子的效果，始终计算不出位置...

大概情况的这样的..

最终解决方案是换成了flex布局。

// 拖拽
const dropEvent = () => {
  let fathDom = document.getElementById("ciYun");
  let currentDom = document.querySelectorAll(".card_bless");
  console.log(currentDom);
  currentDom.forEach((v) => {
    v.onmousedown = function (e) {
    // 鼠标到当前盒子的距离
    /**
      * 这种方法如果div内部有子盒子 offsetX offsetY拿到的是子盒子距离父盒子的距离
      */
      // let ofX = event.offsetX;
      // let ofY = event.offsetY;
      let ofX = event.pageX - v.getBoundingClientRect().left;
      let ofY = event.pageY - v.getBoundingClientRect().top;
      fathDom.onmousemove = function (e) {
        let pageX = e.pageX - (fathDom.offsetLeft + ofX);
        let pageY = e.pageY - (fathDom.offsetTop + ofY);
        // 判断出界
        if (pageX <= 0) {
          pageX = 0;
        }
        if (pageY <= 0) {
          pageY = 0;
        }
        if (pageX >= fathDom.offsetWidth - v.offsetWidth) {
          pageX = fathDom.offsetWidth - v.offsetWidth;
        }
        if (pageY >= fathDom.offsetHeight - v.offsetHeight) {
          pageY = fathDom.offsetHeight - v.offsetHeight;
        }
        v.style.left = pageX + "px";
        v.style.top = pageY + "px";
      };
    };
  });

  fathDom.onmouseup = function (e) {
    fathDom.onmousemove = null;
  };
};