样式
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
#pox{
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 300px;
top: 100px;
}
</style>
实现代码
<body>
<div id="box">
</div>
<div id="pox">
</div>
<script type="text/javascript">
function Drag(obj){
this.obj = obj;
/*this.x = 0;
this.y = 0;*/
this.init();
}
Drag.prototype = {
constructor : Drag,
init : function(){
this.drag();
},
drag : function(){
var _this = this;
this.obj.onmousedown = function(eve){
var e = eve || event;
_this.x = e.offsetX;
_this.y = e.offsetY;
document.onmousemove = function(eve){
var e = eve || event;
_this.l = e.clientX - _this.x;
_this.t = e.clientY - _this.y;
_this.move();
return false;
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
},
move : function(){
this.obj.style.left = this.l + "px";
this.obj.style.top = this.t + "px";
}
}
function SonDrag(obj){
Drag.call(this,obj);
}
SonDrag.prototype = Object.create(Drag.prototype);
SonDrag.prototype.constructor = SonDrag;
SonDrag.prototype.move = function(){
var maxL = document.documentElement.clientWidth - this.obj.offsetWidth;
var maxT = document.documentElement.clientHeight - this.obj.offsetHeight;
this.l = this.l < 0 ? 0 : (this.l > maxL ? maxL : this.l);
this.t = this.t < 0 ? 0 : (this.t > maxT ? maxT : this.t);
this.obj.style.left = this.l + "px";
this.obj.style.top = this.t + "px";
}
new Drag(document.getElementById("box"));
new SonDrag(document.getElementById("pox"));//
</script>
</body>