captureEvents 拖放

最新推荐文章于 2019-07-30 21:03:30 发布

weixin_30852419

最新推荐文章于 2019-07-30 21:03:30 发布

阅读量117

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mingforyou/archive/2013/03/25/2980613.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,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>