captureEvents 拖放

<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>
<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;
        var y=a.layerY?a.layerY:a.offsetY;

        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>

 

posted @ 2013-03-25 13:37 残星 阅读(...) 评论(...) 编辑 收藏