码迷,mamicode.com
首页 > 其他好文 > 详细

面向对象拖拽(子类继承)

时间:2014-12-07 23:11:31      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   sp   for   on   div   

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‘;
}

 

面向对象拖拽(子类继承)

标签:style   blog   io   ar   color   sp   for   on   div   

原文地址:http://www.cnblogs.com/oceanden/p/4149978.html

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