关于鼠标拖拽的功能实现在https://www.cnblogs.com/psxiao/p/11547834.html 得

在www.cnblogs.com/psxiao/p/11… 得到一个思考，为什么要用top和left来实现，和transform的性能谁比较好，然后我用transform做了一个版本


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .drag {
        background-color: skyblue;
        position: absolute;
        line-height: 100px;
        text-align: center;
        user-select:none;
    }
</style>
</head>
<body>
  <div>
  <div class="drag" style="left:0;top:0;width:100px;height:100px">按住拖动</div>

  </div>
  <script>
    // 获取DOM元素  
    let dragDiv = document.getElementsByClassName("drag")[0];
      // 鼠标按下事件 处理程序
      let putDown = function (event) {
          dragDiv.style.cursor = "pointer";
          let offsetX = dragDiv.getBoundingClientRect().left; // 获取当前的x轴距离
          let offsetY = dragDiv.getBoundingClientRect().top; // 获取当前的y轴距离
          let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
          let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距
          document.onmousemove = function (event) {

              var X =  event.clientX - innerX;
              var Y = event.clientY - innerY;
              dragDiv.style.transform = `translate(${X}px,${Y}px)`;

              // 边界判断
              if (X <= 0) {
                X=0
                dragDiv.style.transform = `translate(${X}px,${Y}px)`;
              }
              if (Y <= 0) {
                Y=0
                dragDiv.style.transform = `translate(${X}px,${Y}px)`;
              }
              if (X >= window.innerWidth - parseInt(dragDiv.style.width)) {
                  X = window.innerWidth - parseInt(dragDiv.style.width);
                  dragDiv.style.transform = `translate(${X}px,${Y}px)`;
              }
              if (Y >= window.innerHeight - parseInt(dragDiv.style.height)) {
                  Y = window.innerHeight - parseInt(dragDiv.style.height);
                  dragDiv.style.transform = `translate(${X}px,${Y}px)`;
              }
          }
          // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
          // 否则鼠标抬起后还可以继续拖拽方块
          document.onmouseup = function () {
              document.onmousemove = null;
              document.onmouseup = null;
          }
      }
      // 绑定鼠标按下事件
      dragDiv.addEventListener("mousedown", putDown, false);
  </script>
</body>
</html>

let offsetX = dragDiv.getBoundingClientRect().left; // 获取当前的x轴距离 let offsetY = dragDiv.getBoundingClientRect().top; // 获取当前的y轴距离注意上面这两段代码，当我修改为transform的时候，每次点击都会回到top：0，left：0的位置，所以记得获取transform的X和Y值，那么getBoundingClientRect（）大杀器就又被我想起，真简单，哈哈