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>

https://www.cnblogs.com/boystar/p/5231697.html

<!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>

JS拖动浮动DIV【转】

猜你喜欢