原生js实现div在指定区域内拖拽移动

最新推荐文章于 2025-04-11 13:51:40 发布

勤奋刘哈哈

最新推荐文章于 2025-04-11 13:51:40 发布

阅读量2.6k

点赞数 4

分类专栏：问题记录文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/sinat_35272898/article/details/120904599

版权

问题记录专栏收录该内容

5 篇文章

订阅专栏

直接上代码

可拖拽div元素在指定区域内移动，不会超出区域

<!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>div 在指定区域内移动</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    #parent {
      position: relative;
      width: 700px;
      height: 470px;
      background: gray;
    }

    #children {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: antiquewhite;
      cursor: move;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="children"></div>
  </div>
  <script>
    window.onload = function () {
      var parentNode = document.getElementById("parent");
      var childrenNode = document.getElementById("children");
      var disX = 0;
      var disY = 0;
      childrenNode.onmousedown = function (ev) {
        //鼠标事件对象
        var oEvent = ev || event;
        disX = oEvent.clientX - childrenNode.offsetLeft;
        disY = oEvent.clientY - childrenNode.offsetTop;

        document.onmousemove = function (ev) {
          //鼠标事件对象
          var oEvent = ev || event;
          var l = oEvent.clientX - disX;
          var t = oEvent.clientY - disY;

          if (l < 50) {
            l = 0;
          } else if (l > parentNode.clientWidth - childrenNode.offsetWidth) {
            l = parentNode.clientWidth - childrenNode.offsetWidth;
          }
          if (t < 50) {
            t = 0;
          } else if (t > parentNode.clientHeight - childrenNode.offsetHeight) {
            t = parentNode.clientHeight - childrenNode.offsetHeight;
          }

          childrenNode.style.left = l + "px";
          childrenNode.style.top = t + "px";

          /**如果父盒子设置有marginTop和marginLeft则需要将其设置为0*/
          childrenNode.style.marginLeft = 0;
          childrenNode.style.marginTop = 0;
        }
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        }

        //阻止默认事件
        return false;
      }

    }
  </script>
</body>

</html>

截图

效果截图