<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none
}
#div1{
200px;
height: 300px;
position: absolute;
background: red;
}
#div2{
200px;
height: 300px;
position: absolute;
background: green;
top: 300px;
}
#div3{
200px;
height: 300px;
position: absolute;
background: yellow;
top: 600px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">ddd</div>
<div id="div3">yyyy</div>
<script>
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);
};
}
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;
};
function LimitDrag (id) {
Drag.call(this,id); //获得父类的属性 Drag.apply(this,arguments) //这里arguments就代表传入的参数就不需要全部列出来了
}
//获取父类的方法
for(var i in Drag.prototype){
LimitDrag.prototype[i] = Drag.prototype[i];
}
<!--另外一种获取父类的方法-->
TabOver.prototype = Object.create(SwitchTab.prototype);
TabOver.prototype.constructor = TabOver;
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.offsetWdith;
}
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";
};
window.onload = function () {
new Drag('div1');
new Drag('div2');
new LimitDrag('div3');
};
// C语言没有面向对象的概念 javascript 基于面向对象 java php 具有面向对象的概念
// document.documentElement.clientHeight 网页可视区的宽度
// document.documentElement.clientWdith 网页可视区的高度
//想要继承父类的属性和方法。要做两件事情
//第一件:使用call继承父类属性
//第二件:使用循环将父类中的方法全部拷贝一份到子类中。这样做的目的是为了避免修改子类影响父类
</script>
</body>
</html>
详细可以浏览:http://blog.csdn.net/kkkkkxiaofei/article/details/46474069