移动盒子

实现一个鼠标按下去拖住元素移动的效果.保证移动元素盒子不能超出父盒子
Javascript
 <!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>
      .parent {
        position: relative;
        background: rgb(239, 196, 196);
        margin: 100px;
        padding: 200px;
        outline: 1px solid green;
        overflow: hidden;
      }
      .box {
        position: absolute;
        left: 50px;
        top: 50px;
        /* margin: 10px; */
        padding: 10px;
        width: 100px;
        height: 100px;
        background-color: rgb(0, 0, 0);
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <div id="parent" class="parent">
      <div id="box" class="box"></div>
    </div>

    <script>
      var parent = document.getElementById('parent');
      var box = document.getElementById('box');
      var isDragging = false;
      var mouseOffset = { x: 0, y: 0 };
      var minX = 0;
      var maxX = parent.clientWidth - box.offsetWidth;
      var minY = 0;
      var maxY = parent.clientHeight - box.offsetHeight;

      box.addEventListener('mousedown', function (event) {
        isDragging = true;

        // 计算鼠标与元素左上角的偏移量
        mouseOffset.x = event.clientX - box.offsetLeft;
        mouseOffset.y = event.clientY - box.offsetTop;
        console.log(mouseOffset.x, mouseOffset.y);
      });

      document.addEventListener('mousemove', function (event) {
    if (isDragging) {
            // 计算元素的新位置
            var newX = event.clientX - mouseOffset.x;
            var newY = event.clientY - mouseOffset.y;

            // 限制移动范围
            newX = Math.max(minX, Math.min(newX, maxX));
            newY = Math.max(minY, Math.min(newY, maxY));

            // 更新元素的位置
            box.style.left = newX + 'px';
            box.style.top = newY + 'px';
          }
      });

      document.addEventListener('mouseup', function () {
        isDragging = false;
      });
    </script>
  </body>
</html>