原生JS实现元素拖拽

效果在这里插入图片描述

可以随意拖拽并限制边界检查

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
</head>
<style>
     .mask{
         width:500px;
         height:300px;
         background:antiquewhite;
         border:1px solid #eee;
         display: none;
         position:absolute;
     }

    .mask:hover{
        cursor: move;
    }
</style>
<body>

    <button onclick="maskShow()">
         点击弹出可拖拽登录框
    </button>

    <div class="mask">
            <p>
                我是可以拖动的窗口
            </p>
    </div>

    <script>

         var mask = document.querySelector(".mask");

         function maskShow() {
             mask.style["display"] = "block";
             mask.addEventListener("mousedown",function (e) {
                  var startX = e.pageX - mask.offsetLeft;
                  var startY = e.pageY - mask.offsetTop;
                  mask.addEventListener("mousemove",move);
                  function move(e){
                      var endX = e.pageX  - startX;
                      var endY = e.pageY  - startY;
                      if (endX <= 0){
                          endX = 0;
                      }
                      if (endY <= 0) {
                          endY = 0;
                      }
                      if (endX >= window.innerWidth - mask.offsetWidth){
                          endX = window.innerWidth - mask.offsetWidth;
                      }
                      if (endY >= window.innerHeight - mask.offsetHeight){
                          endY = window.innerHeight - mask.offsetHeight;
                      }

                      mask.style["left"] = endX + "px";
                      mask.style["top"] = endY + "px";
                  }
                 document.addEventListener("mouseup",function () {
                     mask.removeEventListener("mousemove",move);
                 })
             })
         }

    </script>
</body>
</html>

来源：CSDN

作者：l w x 5 2 1

链接：https://blog.csdn.net/qq_39057639/article/details/103966923

标签

js代码

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!