zoukankan      html  css  js  c++  java
  • 面向对象拖拽(子类继承)

    Drag(父类)

    function Drag(id){
        var _this = this;
        this.disX = 0;
        this.disY = 0;
        this.oDiv = document.getElementById(id);
    
        this.oDiv.onmousedown = function(ev){
            _this.fnDown(ev);
            return false;
        };
    }
    
    Drag.prototype.fnDown = function(ev){
            var _this = this;
            var oEvent = ev || event;
    
            this.disX = oEvent.clientX-this.oDiv.offsetLeft;
            this.disY = oEvent.clientY-this.oDiv.offsetTop;
    
            document.onmousemove = function(ev){
                _this.fnMove(ev);
            };
            document.onmouseup = function(){
                _this.fnUp();    
            };
    }
    Drag.prototype.fnMove = function (ev){
                var oEvent = ev || event;
    
                this.oDiv.style.left = oEvent.clientX-this.disX+'px';
                this.oDiv.style.top = oEvent.clientY-this.disY+'px';
    }
    Drag.prototype.fnUp = function (){
                document.onmousemove=null;
                document.onmouseup=null;
    }
    
    /*window.onload=function(){
        var oDiv = document.getElementById('div1');
    
        oDiv.onmousedown=function(ev){
            var oEvent = ev || event;
    
            var disX = oEvent.clientX-oDiv.offsetLeft;
            var disY = oEvent.clientY-oDiv.offsetTop;
    
            document.onmousemove = function(ev){
                var oEvent = ev || event;
    
                oDiv.style.left = oEvent.clientX-disX+'px';
                oDiv.style.top = oEvent.clientY-disY+'px';
            };
    
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            };
        }
    }*/

    limitDrag(子类)

    function LimitDrag(id){
        Drag.call(this, id);
    }
    for(var i in Drag.prototype){
        LimitDrag.prototype[i]=Drag.prototype[i];
    }
    
    LimitDrag.prototype.fnMove = function(ev){
        var oEvent = ev || event;
        var l = oEvent.clientX-this.disX;
        var t = oEvent.clientY-this.disY;
    
        if(l < 0){
            l=0;
        }else if(l > document.documentElement.clientWidth-this.oDiv.offsetWidth){
            l = document.documentElement.clientWidth-this.oDiv.offsetWidth;
        }
    
        this.oDiv.style.left = l +'px';
        this.oDiv.style.top = t +'px';
    }
  • 相关阅读:
    关于数据库的索引知识
    RESTful API设计相关
    Coroutine(协程)模式与线程
    Python网络编程中的服务器架构(负载均衡、单线程、多线程和同步、异步等)
    读懂diff
    Linux学习笔记——如何使用echo指令向文件写入内容
    ubuntu中执行定时任务crontab
    网络编程之异步IO,rabbitMQ笔记
    走进docker的世界之入门篇
    xml基础
  • 原文地址:https://www.cnblogs.com/oceanden/p/4149978.html
Copyright © 2011-2022 走看看