<div id="div2"></div>
#div1,#div2{background: red;width: 300px;height: 300px;position: absolute;}
<script>
//第一种写法将属性包装入构造函数中
// function Drag(id){
// this.oDiv=document.getElementById(id);
// var _this=this;
// this.x=0;
// this.y=0;
// this.oDiv.οnmοusedοwn=function(e){
// var e=e||event;
// _this.x=e.pageX-_this.oDiv.offsetLeft;
// _this.y=e.pageY-_this.oDiv.offsetTop;
// //alert(_this.x)
// document.οnmοusemοve=function(e){
// var e=e||event;
// _this.oDiv.style.left=e.pageX-_this.x+"px";
// _this.oDiv.style.top=e.pageY-_this.y+"px";
// //alert(_this.oDiv.style.left)
// }
// document.οnmοuseup=function(e){
// var e=e||event;
// document.οnmοusemοve=null;
// document.οnmοuseup=null;
// }
// return false;
// }
// }
// var div1=new Drag("div1")
// var div2=new Drag("div2")
//第二种方法,属性在构造函数中申明,方法在原型对象中申明
// function Drag(id){
// this.oDiv=document.getElementById(id);
// this.x=0;
// this.y=0;
// }
// Drag.prototype.draw=function(){
// var _this=this;
// this.oDiv.οnmοusedοwn=function(e){
// var e=e||event;
// _this.x=e.pageX-_this.oDiv.offsetLeft;
// _this.y=e.pageY-_this.oDiv.offsetTop;
// document.οnmοusemοve=function(e){
// var e=e||event;
// _this.oDiv.style.left=e.pageX-_this.x+"px";
// _this.oDiv.style.top=e.pageY-_this.y+"px";
// }
// document.οnmοuseup=function(e){
// var e=e||event;
// document.οnmοusemοve=null;
// document.οnmοuseup=null;
// }
// }
// }
// var div1=new Drag("div1")
// div1.draw();
// var div2=new Drag("div2")
// div2.draw();
//第三种写法,属性与方法的一部分在构造函数中申明,方法另一部分在原型对象中申明
// function Drag(id){
// this.oDiv=document.getElementById(id);
// var _this=this;
// this.x=0;
// this.y=0;
// this.oDiv.οnmοusedοwn=function(e){
// _this.draw(e);
// return false;
// }
// }
// Drag.prototype.draw=function(e){
// var e=e||event;
// var _this=this;
// this.x=e.pageX-this.oDiv.offsetLeft;
// this.y=e.pageY-this.oDiv.offsetTop;
// document.οnmοusemοve=function(e){
// var e=e||event;
// _this.oDiv.style.left=e.pageX-_this.x+"px";
// _this.oDiv.style.top=e.pageY-_this.y+"px";
// }
// document.οnmοuseup=function(e){
// var e=e||event;
// document.οnmοusemοve=null;
// document.οnmοuseup=null;
// }
// }
// var div1=new Drag("div1")
// var div2=new Drag("div2")
//第四种写法将属性方法全包装入构造函数中
function Drag(id){
this.oDiv=document.getElementById(id);
var _this=this;
this.x=0;
this.y=0;
this.draw=function(){
this.oDiv.οnmοusedοwn=function(e){
var e=e||event;
_this.x=e.pageX-_this.oDiv.offsetLeft;
_this.y=e.pageY-_this.oDiv.offsetTop;
//alert(_this.x)
document.οnmοusemοve=function(e){
var e=e||event;
_this.oDiv.style.left=e.pageX-_this.x+"px";
_this.oDiv.style.top=e.pageY-_this.y+"px";
//alert(_this.oDiv.style.left)
}
document.οnmοuseup=function(e){
var e=e||event;
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
return false;
}
}
}
var div1=new Drag("div1")
div1.draw();
var div2=new Drag("div2")
div2.draw();