div随意拖动小例子

最新推荐文章于 2024-07-12 10:43:17 发布

anpochi7793

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量157

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lansy/p/6136895.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.οnlοad=function(){  
    drag(document.getElementById('drag'));  
};  
  
function drag(o){  
    o.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function(){  
            if(o.releaseCapture)  
                o.releaseCapture();  
            else if(window.captureEvents)  
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
            d.οnmοusemοve=null;  
            d.οnmοuseup=null;  
        };  
    };  
}  
</script>  
</head>  
  
<body>  
<div id="drag">drag me<div>  
</body>  
</html>

转载于:https://www.cnblogs.com/lansy/p/6136895.html

anpochi7793

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div随意拖动小例子

<html> <head> <title> Drag Demo 1 </title> <style type="text/css"> #drag{ width:100px; height:20px; background-color:#eee; ...
复制链接

扫一扫