js拖动窗口

最新推荐文章于 2021-09-11 11:26:28 发布

yudeboo

最新推荐文章于 2021-09-11 11:26:28 发布

阅读量208

点赞数

文章标签： js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0}
        #main{
            position: absolute;
            width: 260px;
            height: 260px;
            background: antiquewhite;
            top: 0;
            left: 0;
        }
        #con{
            width: 100%;
            height: 30px;
            background: aquamarine;
            cursor: move;
        }
    </style>
</head>
<body>

<div id='main'>
    <div id='con'>拖动我</div>
</div>
<script>

        function $(id){return document.getElementById(id);}

//        居中浮层
        function aurocenter(el){
//            可视区宽高
            var bodyw=document.documentElement.clientWidth;
            var bodyh=document.documentElement.clientHeight;

            var elw=el.offsetWidth;
            var elh=el.offsetHeight;

            el.style.left=(bodyw-elw)/2+'px';
            el.style.top=(bodyh-elh)/2+'px';
        }


        aurocenter($('main'))
        var offx=0;
        var offy=0;
        var tuodong=false; //判断是否可拖动

//        鼠标按下
        $('con').addEventListener('mousedown',function(ev){
            var ev=ev||window.event;
//            算出点击内容 里面的位置
            offx= ev.pageX-$('main').offsetLeft;
            offy= ev.pageY-$('main').offsetTop;
            tuodong=true;
        })
//        鼠标移动
        document.οnmοusemοve=function(ev){
            var ev=ev||window.event;

//            鼠标当前位置
            var mousex=ev.pageX;
            var mousey=ev.pageY;

            var movex=0;
            var movey=0;

            if (tuodong===true){
//                计算出盒子距离屏幕边缘的距离
                movex=mousex-offx;
                movey=mousey-offy;

//                获取可视区的宽高
                var pagewidth=document.documentElement.clientWidth;
                var pageheight=document.documentElement.clientHeight;

//                获取大盒子的宽高
                var dalogW=$('main').offsetWidth;
                var dalogH=$('main').offsetHeight;

//                算出盒子边缘距离   屏幕边缘的距离
                var maxx=pagewidth-dalogW;
                var maxy=pageheight-dalogH;

//                movex>0   并且 movex<（页面最大宽度 - 浮层的宽度）
                movex=Math.min(maxx, Math.max(0,movex))
                movey=Math.min(maxy, Math.max(0,movey))

//                盒子偏移量
                $('main').style.left=movex+'px';
                $('main').style.top=movey+'px';
            }
        }
//        鼠标松开
        document.οnmοuseup=function(){
            tuodong=false;
        }

        window.οnresize=function(){
            aurocenter($('main'));
        }

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

yudeboo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js拖动窗口

Title *{margin:0;padding:0} #main{ position: absolute; width: 260px; height: 260px; background: antiquewhite; top: 0;
复制链接

扫一扫