时间戳

首页 > 技术文章 > js拖动层

js拖动层

xiaomou2014 2014-09-02 16:52 原文

模仿网易彩票网（http://caipiao.163.com/）的登陆框自己做了一个拖动层，不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态（cursor:text;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js拖动层</title>
<style>
body{padding:0; margin:0; width:100%; height:100%;}
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
#dragWp{width:100%; height:100%; position:fixed; left:0; top:0; z-index:99999999; _position:absolute;_left:expression(eval(document.documentElement.scrollLeft));_top:expression(eval(document.documentElement.scrollTop))}
#dragBg{ width:100%; height:100%; background-color:#000; position:absolute; left:0; top:0; opacity:0.4; filter:alpha(opacity=40);}
#dragMain{width:200px;height:100px;position:absolute; border:1px solid #999;line-height:30px;font-size:16px;text-align:center; background-color:#FFF;}
#dragTitle{ width:100%; height:40px; line-height:40px; background-color:#ccc; cursor:move;}    
#close{float:right; margin-right:5px; z-index:999; font-size:12px; font-style:normal; cursor:pointer;}
</style>    
</head>
<body>
<div style="height:1200px; text-align:center;">
    <h1>hello world</h1>
</div>
<div id="dragWp">
    <div id="dragBg"></div>
    <div id="dragMain">
        <div id="dragTitle">
            <em id="close">关闭</em>拖动层
        </div>
        hello world
    </div>
</div>
<script>
window.onload=function(){
    var dragWp=document.getElementById("dragWp");
    var dragMainId=document.getElementById("dragMain");
    var w=dragWp.offsetWidth;
    var h=dragWp.offsetHeight;
    dragMainId.style.left=(w-dragMainId.offsetWidth)/2+"px";
    dragMainId.style.top=(h-dragMainId.offsetHeight)/2+"px";
}

function dragTemp(dragWp,dragMainId,dragTitleId,closeId,opacity){
    var dragWp=document.getElementById(dragWp);
    var dragMainId=document.getElementById(dragMainId);
    var dragTitleId=document.getElementById(dragTitleId);
    var closeId=document.getElementById(closeId);
    var posX,posY,x,y;
    dragTitleId.onmousedown=function(e){
        var e = e || window.event;
        posX=e.clientX-dragMainId.offsetLeft; //鼠标距离拖动层左侧的距离
        posY=e.clientY-dragMainId.offsetTop;  //鼠标距离拖动层上侧的距离
        dragMainId.style.opacity=opacity;
        dragMainId.style.filter="alpha(opacity="+opacity*100+")";
        document.onmousemove=function(e){
            var e = e || window.event;
            x=e.clientX-posX;
            y=e.clientY-posY;
//            if(x<=0) x=0;    //不允许移出左边
//            else if(x>=document.body.clientWidth-dragMainId.offsetWidth) x=document.body.clientWidth-dragMainId.offsetWidth; //不允许移出右边
            dragMainId.style.left=x+"px";
            dragMainId.style.top=y+"px";
            dragTitleId.style.cursor="move";
            document.onselectstart=function(){ return false } //拖动不选中文字
        }
    };
    document.onmouseup=function(){
        document.onmousemove=null;
        dragMainId.style.opacity=1;
        dragMainId.style.filter="alpha(opacity=100)";
    }
    if(closeId){
        closeId.onclick=function(){
            dragWp.style.display="none";    
        }
    }
}
function drag(args){
    dragTemp(args.dragWp,
             args.dragMainId,
             args.dragTitleId,
             args.closeId || null,
             args.opacity || 1)    
}
//调用
drag({dragWp:"dragWp",dragMainId:"dragMain",dragTitleId:"dragTitle",closeId:"close",opacity:0.5});
</script>
</body>
</html>

 

推荐阅读