JavaScript实现对话框的拖拉

最新推荐文章于 2021-11-01 11:42:47 发布

杨亚仑

最新推荐文章于 2021-11-01 11:42:47 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript学习

本文链接：https://blog.youkuaiyun.com/yangyalun/article/details/83276154

JavaScript学习专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的拖动对话框功能。通过监听mousedown、mousemove和mouseup事件，实现了对话框在浏览器窗口内的自由拖动。该方法考虑了鼠标快速移动时可能脱离对话框边界的情况，确保了拖动的流畅性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   //拖拉对话框函数，这个header div要在body div内部
        function dragFunction(header,body) {
            var disX=0;
            var disY=0;
            //拖拉信息框函数
            header.onmousedown=function (ev) {
                var oEvent=ev||event;       //为了浏览器的兼容
                disX=oEvent.clientX-body.offsetLeft;//mousedown的时候获取鼠标的位置，并计算鼠标到div左边与上边的距离
                disY=oEvent.clientY-body.offsetTop;
                document.onmousemove=function (ev) {  //为何是document的onmousemove，而不是div，是因为鼠标移的快的时候，离开了div，而就不会再执行这个函数，即鼠标移动得快，div就跟不了鼠标
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;  //mousemove的时候，将鼠标的位置减去点击的时候鼠标与div的距离来控制div跟着鼠标走
                    var t=oEvent.clientY-disY;
                    if(l<0)     //防止div跑到页面外
                    {
                        l=0;
                    }
                    else if(l>document.documentElement.clientWidth-body.offsetWidth)
                    {
                        l=document.documentElement.clientWidth-body.offsetWidth;
                    }
                    if(t<0)
                    {
                        t=0;
                    }
                    else if (t>document.documentElement.clientHeight-body.offsetHeight)
                    {
                        t=document.documentElement.clientHeight-body.offsetHeight;
                    }
                    body.style.left=l+"px";
                    body.style.top=t+"px";
                };
                document.onmouseup=function () {  //mouseup的时候，将mousemove和mousedown为null，为何是document而不是div，因为当鼠标移动到网页上面的时候，被一块东西挡着了，这个时候此时up，并不会执行此函数，即，up后，div还不会停止
                    document.onmousemove=null;
                    header.onmouseup=null;
                }
            };
        }