做盒子的拖拽

最新推荐文章于 2024-11-09 10:31:18 发布

独爱那杯cc

最新推荐文章于 2024-11-09 10:31:18 发布

阅读量374

点赞数 11

文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/YM_010530/article/details/135714318

版权

本文详细介绍了如何使用JavaScript和CSS实现一个可拖动的HTML元素，涉及鼠标按下(mousedown)、移动(mousemove)和抬起(mouseup)事件的处理以及DOM操作和边界限制。

摘要由CSDN通过智能技术生成

<!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>拖拽</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: gold;
        position: absolute;
        left: 100px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      // 拖拽需要有三个事件的支撑
      // 鼠标按下 => mousedown
      // 鼠标移动 => mousemove
      // 鼠标抬起 => mouseup
      let box = document.querySelector('.box');

      // 鼠标按下
      box.onmousedown = function (e) {
        // 每一次按下都需要获取当前的初始位置
        let startX = box.offsetLeft;
        let startY = box.offsetTop;
        // console.log(startX, startY);

        // 获取按下时候的鼠标落点位置
        let x = e.pageX;
        let y = e.pageY;

        // 鼠标移动
        document.onmousemove = function (e) {
          // 使用移动过程的最新鼠标落点 - 按下位置的鼠标落点  = 当前这一次的移动距离
          let dx = startX + e.pageX - x;
          let dy = startY + e.pageY - y;

          if (dx <= 50) {
            dx = 50;
          } else if (dx >= window.innerWidth - box.offsetWidth - 50) {
            dx = window.innerWidth - box.offsetWidth - 50;
          }

          if (dy <= 50) {
            dy = 50;
          } else if (dy >= window.innerHeight - box.offsetHeight - 50) {
            dy = window.innerHeight - box.offsetHeight - 50;
          }

          // 修改box的left和top的取值
          // 最终的位置： 每一次移动前初始位置 + 当前这一次的距离
          box.style.left = dx + 'px';
          box.style.top = dy + 'px';
        };
        // 鼠标抬起
        document.onmouseup = function () {
          // 解绑mousemove事件
          document.onmousemove = null;
        };
      };
    </script>
  </body>
</html>