JS拖动浮动DIV

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf8">

    <title>js拖拽效果</title>

    <style type="text/css">

    #div1 {

        width : 200px;

        height: 200px;

        position: absolute;

        background: #99dd33;

        cursor: move;

    }

    </style>

</head>

<body>

    <div id="div1"></div>

</body>

<script type="text/javascript">

    // js代码

    window.onload=function() {

    var disX = disY = 0;                         // 鼠标距离div的左距离和上距离

    var div1 = document.getElementById("div1");  // 得到div1对象

    // 鼠标按下div1时

    div1.onmousedown = function(e) {

        var evnt = e || event;                   // 得到鼠标事件

        disX = evnt.clientX - div1.offsetLeft;   // 鼠标横坐标 - div1的left

        disY = evnt.clientY - div1.offsetTop;    // 鼠标纵坐标 - div1的top

        // 鼠标移动时

        document.onmousemove = function(e) {

            var evnt = e || event;

            var x = evnt.clientX - disX;

            var y = evnt.clientY - disY;

            var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;

            var window_height = document.documentElement.clientHeight - div1.offsetHeight;

            x = ( x < 0 ) ? 0 : x;                          // 当div1到窗口最左边时

            x = ( x > window_width ) ? window_width : x;    // 当div1到窗口最右边时

            y = ( y < 0 ) ? 0 : y;                          // 当div1到窗口最上边时

            y = ( y > window_height ) ? window_height : y;  // 当div1到窗口最下边时

            div1.style.left = x + "px";

            div1.style.top  = y + "px";

        };

        // 鼠标抬起时

        document.onmouseup = function() {

            document.onmousemove =null;

            document.onmouup = null;

        };

        return false;

    };

};

</script>

</html>
相关文章
