百度拖拽(鼠标事件)

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>百度拖拽</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            position: absolute;
            left:0;
            top:0;
            width: 300px;
            height: 400px;
            background:#0cc;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="wrap">
    </div>
    <script>
        var wrap = document.getElementById("wrap");
//        水平垂直居中=(屏幕宽(高)度-盒子宽(高)度)/2
        wrap.style.left = (document.documentElement.clientWidth - wrap.offsetWidth)/2 + "px"; 
        wrap.style.top = (document.documentElement.clientHeight - wrap.offsetHeight)/2 + "px";
        //这里只用到常用的三个鼠标事件：onmousedown(鼠标按下去时触发)、onmousemove(鼠标移动时触发)、onmouseup(鼠标松开时触发)
        wrap.onmousedown = function(e){//鼠标按下去时
            var event = e || window.event;//event是一个事件对象，一个全局对象。e(现代浏览器)，window.event(低版本的IE浏览器)
            var oW =event.clientX - wrap.offsetLeft;//X轴盒子的偏移量 = 当前鼠标点击X轴坐标 - 盒子的left值
            var oH = event.clientY - wrap.offsetTop;//Y轴盒子的偏移量 = 当前鼠标点击Y轴坐标 - 盒子的top值
            document.onmousemove = function(e){//鼠标移动时
                var event = e || window.event;
                var bLeft = event.clientX - oW;//鼠标移动的left偏移量 = 当前移动的X轴坐标 - X轴盒子的偏移量
                var bTop = event.clientY - oH; //鼠标移动的top偏移量 = 当前移动的Y轴坐标 - Y轴盒子的偏移量
                var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;//获取文档水平方向滚动条位置
                var scrollY = document.documentElement.scrollTop || document.body.scrollTop;//获取文档垂直方向滚动条位置
                //scrollX和scrollY为0当出现滚动条时才会大于0
                //判断屏幕的边界目的是不让盒子超出屏幕的宽(高)度
                if(bLeft < scrollX){
                    bLeft = scrollX;//盒子的偏移量left=scrollX
                }
                else if(bLeft > document.documentElement.clientWidth - wrap.offsetWidth +scrollX){ 
                    bLeft = document.documentElement.clientWidth - wrap.offsetWidth +scrollX;//盒子的偏移量left = 屏幕宽度 - 盒子的宽度+scrollx(滚动条值)
                }
                if(bTop < scrollY){
                    bTop = scrollY;//盒子的偏移量top=scrollX
                }
                else if(bTop > document.documentElement.clientHeight - wrap.offsetHeight +scrollY){
                        bTop = document.documentElement.clientHeight - wrap.offsetHeight +scrollY;////盒子的偏移量top = 屏幕高度 - 盒子的高度+scrollY(滚动条值)                
                }
                wrap.style.left = bLeft + "px";//盒子的left偏移量
                wrap.style.top = bTop + "px";//盒子的top偏移量
            }
        }
        document.onmouseup = function(){
            document.onmousemove = null;//鼠标松开时解除onmousemove
        }
    </script>
</body>
</html>

 

posted @ 2015-12-21 16:39  落叶无痕6  阅读(119)  评论(0)    收藏  举报