js原生事件委托拖拽功能

最新推荐文章于 2023-04-03 08:16:35 发布

晓秒四下

最新推荐文章于 2023-04-03 08:16:35 发布

阅读量312

点赞数

本文链接：https://blog.csdn.net/mengchixianzi/article/details/111588250

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>file</title>
    <style>
      div{
          width: 100px;
          height: 100px;
          background-color: red;
          /* float: left; */
          /* margin-top: 10px; */
          position: absolute;
      }
    </style>
  </head>

    <div drag="drag" style="top:0px"></div>
    <div drag=""  style="top:120px"></div>
    <div drag="drag"  style="top:240px"></div>

    <script type="text/javascript">
      
        document.documentElement.onmousedown = function(){

            if(event.srcElement.getAttribute("drag") == "drag"){

                var _this = event.srcElement;
                var needX = event.clientX - _this.offsetLeft;
                var needY = event.clientY - _this.offsetTop;
                document.onmousemove = function(){

                    // _this.style.left = event.clientX - needX + "px";
                    // _this.style.top = event.clientY - needY + "px";

                    var l = event.clientX - needX;
                    var t = event.clientY - needY;
                    if(l < 0){
                        l = 0;
                    }else if(l > window.innerWidth - _this.offsetWidth){
                        l = window.innerWidth - _this.offsetWidth;
                    }

                    if(t < 0){
                        t = 0;
                    }else if(t > window.innerHeight - _this.offsetHeight){
                        t = window.innerHeight - _this.offsetHeight;
                    }

                    _this.style.left = l + "px";
                    _this.style.top = t + "px";
                }

                document.onmouseup = function(){
                    this.onmousedown = this.onmousemove = null;
                }

                return false;
            }
        }
    </script>
</body>
</html>

给需要能拖动的div添加 drag="drag" 属性即可被拖拽