[Js]面向对象的拖拽

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
    new Drag("div1");
    new Drag("div2");
}
function Drag(id)
{
    var _this=this;
    this.oDiv=document.getElementById(id);    
    this.disX=0;
    this.disY=0;
    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;
        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;
        }
        
        if(t<0)
        {
            t=0;
        }
        else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
        {
            t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
        }
        
        this.oDiv.style.left=l+'px';
        this.oDiv.style.top=t+'px';
    };

Drag.prototype.fnUp=function()
    {
        document.onmousemove=null;
        document.onmouseup=null;
    };

</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

继承

function LimitDrag(id){

Drag.call(this,id);                     //继承属性

}

for(var i in Drag.prototype){

LimitDrag.prototype[i]=Drag.prototype[i];

}

上一篇:POS VB


下一篇:UML建模工具-火龙果软件