每日一个js实例8--通过面向对象实现拖拽

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

<div id="div2"></div>

#div1,#div2{background: red;width: 300px;height: 300px;position: absolute;}

 <script>
    //第一种写法将属性包装入构造函数中
        // function Drag(id){
        //     this.oDiv=document.getElementById(id);
        //     var _this=this;
        //     this.x=0;
        //     this.y=0;
        //     this.oDiv.onmousedown=function(e){
        //         var e=e||event;
        //         _this.x=e.pageX-_this.oDiv.offsetLeft;
        //         _this.y=e.pageY-_this.oDiv.offsetTop;
        //         //alert(_this.x)

        //         document.onmousemove=function(e){
        //             var e=e||event;
        //             _this.oDiv.style.left=e.pageX-_this.x+"px";
        //             _this.oDiv.style.top=e.pageY-_this.y+"px";
        //             //alert(_this.oDiv.style.left)
        //         }
        //         document.onmouseup=function(e){
        //             var e=e||event;
        //             document.onmousemove=null;
        //             document.onmouseup=null;
        //         }
        //         return false;
        //     }
        // }
        // var div1=new Drag("div1")
        // var div2=new Drag("div2")

         //第二种方法，属性在构造函数中申明，方法在原型对象中申明
        //  function Drag(id){
        //     this.oDiv=document.getElementById(id);
        //     this.x=0;
        //     this.y=0;
        // }
        // Drag.prototype.draw=function(){
        //     var _this=this;
        //     this.oDiv.onmousedown=function(e){
        //         var e=e||event;
        //         _this.x=e.pageX-_this.oDiv.offsetLeft;
        //         _this.y=e.pageY-_this.oDiv.offsetTop;

        //         document.onmousemove=function(e){
        //             var e=e||event;
        //             _this.oDiv.style.left=e.pageX-_this.x+"px";
        //             _this.oDiv.style.top=e.pageY-_this.y+"px";
        //         }
        //         document.onmouseup=function(e){
        //             var e=e||event;
        //             document.onmousemove=null;
        //             document.onmouseup=null;
        //         }
        //     }
        // }
        //  var div1=new Drag("div1")
        //  div1.draw();
        // var div2=new Drag("div2")
        // div2.draw();

        //第三种写法，属性与方法的一部分在构造函数中申明，方法另一部分在原型对象中申明
        // function Drag(id){
        //     this.oDiv=document.getElementById(id);
        //     var _this=this;
        //     this.x=0;
        //     this.y=0;
        //     this.oDiv.onmousedown=function(e){
        //         _this.draw(e);
        //         return false;
        //     }
        // }
        // Drag.prototype.draw=function(e){
        //     var e=e||event;
        //     var _this=this;
        //     this.x=e.pageX-this.oDiv.offsetLeft;
        //     this.y=e.pageY-this.oDiv.offsetTop;

        //     document.onmousemove=function(e){
        //         var e=e||event;
        //         _this.oDiv.style.left=e.pageX-_this.x+"px";
        //         _this.oDiv.style.top=e.pageY-_this.y+"px";
        //     }
        //     document.onmouseup=function(e){
        //         var e=e||event;
        //         document.onmousemove=null;
        //         document.onmouseup=null;
        //     }
        // }
        // var div1=new Drag("div1")
        // var div2=new Drag("div2")

         //第四种写法将属性方法全包装入构造函数中
        function Drag(id){
            this.oDiv=document.getElementById(id);
            var _this=this;
            this.x=0;
            this.y=0;
            this.draw=function(){
                     this.oDiv.onmousedown=function(e){
                    var e=e||event;
                    _this.x=e.pageX-_this.oDiv.offsetLeft;
                    _this.y=e.pageY-_this.oDiv.offsetTop;
                    //alert(_this.x)

                    document.onmousemove=function(e){
                        var e=e||event;
                        _this.oDiv.style.left=e.pageX-_this.x+"px";
                        _this.oDiv.style.top=e.pageY-_this.y+"px";
                        //alert(_this.oDiv.style.left)
                    }
                    document.onmouseup=function(e){
                        var e=e||event;
                        document.onmousemove=null;
                        document.onmouseup=null;
                    }
                    return false;
                }
            }
        }
        var div1=new Drag("div1")
         div1.draw();
        var div2=new Drag("div2")
        div2.draw();