春雨_Yang

努力不一定成功，但放弃一定会失败。

导航

js拖拽 

<!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>无标题文档</title>
<style type="text/css">
    *{ -moz-user-select:-moz-none}<!--在FF下滑动被认为选中。-->
</style>
</head>

<body>
<div id="div" style=" color:#FFFFFF; width:200px; height:200px; position:absolute; top:0; left:0; background:#000">1111111111111111111111
</div>
</body>
</html>
<script type="text/javascript">
    var oDiv=document.getElementById("div")
    var BoxDiv={x:0,y:0}
    var Mouse={x:0,y:0}
    oDiv.onmousedown=function(e){
        var e=e||event;
        BoxDiv.x=oDiv.offsetLeft;
        BoxDiv.y=oDiv.offsetTop
        Mouse.x= e.clientX
        Mouse.y= e.clientY
        document.onmousemove=function(){//将odiv换成document解决其它浏览器获得焦点
var e=e||event;
            if(oDiv.setCapture){//                    setCapture
                oDiv.setCapture()//解决IE拖动快了 盒子跟不上。获得焦点
            }
            oDiv.innerHTML=e.clientX-Mouse.x
            oDiv.style.left=BoxDiv.x+(e.clientX-Mouse.x)+"px"
            oDiv.style.top=BoxDiv.y+(e.clientY-Mouse.y)+"px"
            
        }    
        document.onmouseup=function(){//将odiv换成document解决其它浏览器获得焦点
if(oDiv.releaseCapture){//失去焦点。
                oDiv.releaseCapture()
            }
            document.onmousemove=null;//将odiv换成document解决其它浏览器获得焦点
            document.onmouseup=null//将odiv换成document解决其它浏览器获得焦点
        }
    }
</script>

 

posted on 2012-03-19 17:35  春雨_Yang  阅读(223)  评论(0)    收藏  举报