关于移动div的具体实现（js）

最新推荐文章于 2024-07-28 20:27:10 发布

baguangkui4924

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量145

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Arther-J/p/5396549.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动框练习</title>
    <style type = "text/css">
        #big{width: 300px;height: 200px;position: absolute;top: 200px;left: 300px;background: #ccc;}
        h1{width: 200px;height: 50px;line-height: 50px;text-align: center;background: orange;margin: 0 auto; cursor: move;}
    </style>
</head>
<body>
    <div id="big">
        <h1 class="titl"></h1>
    </div>
    <script type="text/javascript">
        //通过父元素获取到指定想要获取的元素。
        function getClass(clsName,parent){
            var oParent = parent?document.getElementById(parent):document;
            var oH1 = oParent.getElementsByClassName(clsName)[0];
            return oH1;
        }
        window.onload = drag;
        //给h1添加按住的事件。
        function drag(){
            var h1Node = getClass("titl","big");
            h1Node.onmousedown = fnDown;
        }
        //通过函数来获取指针的位置。
        function fnDown(event) {
            event = event || window.event;
            var oDiv = document.getElementById("big"),
                //光标按下时光标和面板之间的距离。
                disX = event.clientX-oDiv.offsetLeft;
                disY = event.clientY-oDiv.offsetTop;
            document.onmousemove = function(event) {
                event = event || window.event;
                fnMove(event,disX,disY);
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
        function fnMove(e,posX,posY) {
            var oDiv = document.getElementById("big"),
                l = e.clientX-posX,
                t = e.clientY-posY,
                winW = document.documentElement.clientWidth || document.body.clientWidth,
                winH = document.documentElement.clientHeight || document.body.clientHeight,
                maxW = winW-oDiv.offsetWidth,
                maxH = winH-oDiv.offsetHeight;
            if (l<0) {
                l=10;
            } else if(l>maxW){
                l=maxW;
            }
            if (t<0) {
                t=10;
            } else if(t>maxH){
                t=maxH;
            }
            oDiv.style.left = l+"px";
            oDiv.style.top = t+"px";
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/Arther-J/p/5396549.html

baguangkui4924

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于移动div的具体实现（js）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>移动框练习</title> <style type = "text/css"> #big{width: 300...
复制链接

扫一扫