随笔- 63 文章- 0 评论- 76 阅读- 18万

div随意拖动小例子

<html>  
<head>  
<title> Drag Demo 1 </title>  
<style type="text/css"> 
#drag{  
    width:100px;  
    height:20px;  
    background-color:#eee;  
    border:1px solid #333;  
    position:absolute;  
    top:30px;  
    left:200px;  
    text-align:center;  
    cursor:default;  
    }  
</style>  
<script type="text/javascript">  
window.onload=function(){  
    drag(document.getElementById('drag'));  
};  
   
function drag(o){  
    o.onmousedown=function(a){  
        var d=document;if(!a)a=window.event;  
        var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;  
        if(o.setCapture)  
            o.setCapture();  
        else if(window.captureEvents)  
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
   
        d.onmousemove=function(a){  
            if(!a)a=window.event;  
            if(!a.pageX)a.pageX=a.clientX;  
            if(!a.pageY)a.pageY=a.clientY;  
            var tx=a.pageX-x,ty=a.pageY-y;  
            o.style.left=tx;  
            o.style.top=ty;  
        };  
   
        d.onmouseup=function(){  
            if(o.releaseCapture)  
                o.releaseCapture();  
            else if(window.captureEvents)  
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
            d.onmousemove=null;  
            d.onmouseup=null;  
        };  
    };  
}  
</script>  
</head>  
   
<body>  
<div id="drag">drag me<div>  
</body>  
</html>  