js--继承方法实现拖拽 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="format-detection" content="telphone=no, email=no"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title></title>
    <style type="text/css">
        #div1{width: 60px;  height: 60px;background-color: pink;position: absolute;}
        #div2{width: 60px;  height: 60px;background-color: yellowgreen;position: absolute;left: 60px;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var d1=new Drag("div1");
            var d2=new ChildDrag("div2");
            d1.init();
            d2.init();
        }
        function Drag(id){ //父类
            this.obj=document.getElementById(id);
            this.disX=0;
            this.disY=0;
        }
        Drag.prototype.init=function(){
            var _this=this;
            this.obj.onmousedown=function(ev){ //obj
                var ev=ev||window.event;
                _this.fnDown(ev); //传ev
                document.onmousemove=function(ev){
                    var ev=ev||window.event;
                    _this.fnMove(ev);
                };
                document.onmouseup=function(ev){
                    _this.fnUp(ev);
                }
                return false;
            }
        }
        Drag.prototype.fnDown=function(ev){
            this.disX=ev.clientX-this.obj.offsetLeft;
            this.disY=ev.clientY-this.obj.offsetTop;
        }
        Drag.prototype.fnMove=function(ev){
            this.obj.style.left=ev.clientX-this.disX+"px";
            this.obj.style.top=ev.clientY-this.disY+"px";
        }
        Drag.prototype.fnUp=function(ev){
           document.onmousemove=null;
           document.onmouseup=null;
        }
/*-----------继承-------------------*/
//继承函数
        function extend(childObj,parentObj){
            for(var attr in parentObj){
                childObj[attr]=parentObj[attr];
            }
        }
        function ChildDrag(id){
            Drag.call(this,id); //属性用call继承+参数
        }
        extend(ChildDrag.prototype,Drag.prototype);//方法继承
        //
        ChildDrag.prototype.fnMove=function(ev){
            var L=ev.clientX-this.disX;
            var T= ev.clientY-this.disY;
            var maxWidth=document.documentElement.clientWidth-this.obj.offsetWidth;
            var macHeight=document.documentElement.clientHeight-this.obj.offsetHeight;
            if(L<0){
                L=0
            }else if(L>maxWidth){
                L=maxWidth;
            };
            if(T<0){
                T=0
            }else if(T>macHeight){
                T=macHeight;
            }
            this.obj.style.left=L+"px";
            this.obj.style.top=T+"px";
        }

    </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
View Code

 

posted @ 2016-10-12 15:37  越来越好888  阅读(151)  评论(0)    收藏  举报