<style>
        *{margin: 0; padding: 0;}
        #div1{width: 150px; height: 150px; background: red; position: absolute;}
        #div2{width: 600px; height: 500px; background: #ccc; position: absolute;}
    </style>
<script>
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;
                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;
                if(oDiv.setCapture){//兼容ie9以下
                    oDiv.onmousemove=mouseMove;
                    oDiv.onmouseup=mouseUp;
                    oDiv.setCapture();
                }else{//兼容其他浏览器
                    document.onmousemove=mouseMove;
                    document.onmouseup=function(ev){
                        this.onmousemove=null;
                        this.onmouseup=null;
                    };
                }
                return false;
            };
            function mouseMove(ev){
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
                if(l<50){
                    l=0;
                }else if(l>oDiv2.offsetWidth-oDiv.offsetWidth-50){
                    l=oDiv2.offsetWidth-oDiv.offsetWidth;
                }
                if(t<50){
                    t=0;
                }else if(t>oDiv2.offsetHeight-oDiv.offsetHeight-50){
                    t=oDiv2.offsetHeight-oDiv.offsetHeight;
                }
                oDiv.style.left=l+"px";
                oDiv.style.top=t+"px";
            };
            function mouseUp(){
                this.onmousemove=null;
                this.onmouseup=null;
                if(oDiv.releaseCapture){
                    oDiv.releaseCapture();
                }
            }
        }
    </script>
<div id="div2">
        <div id="div1">时诵诗书双宿双飞社s少时诵诗书双宿双飞社</div>
    </div>
相关评论(0)
您是不是忘了说点什么?

友情提示:垃圾评论一律封号...

还没有评论,快来抢沙发吧!