码迷,mamicode.com
首页 > Web开发 > 详细

js 拖拽

时间:2017-02-18 12:08:54      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:element   client   拖拽   else   标题   idt   head   sem   style   

<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; position:absolute; background:red;}
</style>
</head>
<script>
window.onload=function(){
    var oDiv=document.getElementById(div1);
    var disX=0;
    var disY=0;
    oDiv.onmousedown=function(ev){
            var oEvent=ev || event;
            disX=oEvent.clientX-oDiv.offsetLeft;
            disY=oEvent.clientY-oDiv.offsetTop;
            document.onmousemove=function(ev){
                var oEvent=ev || event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
                if(l<0){
                    l=0;
                    }
                    else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
                    {
                        l=document.documentElement.clientWidth-oDiv.offsetWidth;
                    }
                if(t<0){
                    t=0;
                    }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
                    {
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;
                    }
                oDiv.style.left=l+px;
                oDiv.style.top=t+px;
                
                }
                    document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
        }
        
    }
</script>

<body>
<div id="div1"></div>
</body>
</html>

 

js 拖拽

标签:element   client   拖拽   else   标题   idt   head   sem   style   

原文地址:http://www.cnblogs.com/zxl89/p/6412797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!