<html>
<head>
<meta charset="UTF-8">
<title>面向对象拖拽</title>
<style>
#div1{height: 200px; width: 200px; background: yellow; position: absolute;}
#div2{height: 200px; width: 200px; background: green; position: absolute;}
</style>
</head>
<body>
<div id="div1">周杰伦</div>
<div id="div2">张学友</div>
<script src="js/Drag.js"></script>
<script src="js/Limit.js"></script>
<script>
window.οnlοad=function()
{
new Drag('div1');
new limitDrag('div2');
}
</script>
</body>
</html>
function Drag(id)
{
var _this=this;
this.disX=0;
this.disY=0;
this.oDiv=document.getElementById(id);
this.oDiv.οnmοusedοwn=function(ev)
{
_this.fnDown(ev);
}
};
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.οnmοusemοve=function(ev)
{
_this.fnMove(ev);
return false;
}
document.οnmοuseup=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.οnmοusedοwn=null;
document.οnmοusemοve=null;
};
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;
}
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';
};
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
