<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#aaa{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#dddd{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
top:20px;
left: 500px;
}
</style>
</head>
<body>
<div id='aaa'></div>
<div id='dddd'></div>
<script>
function Drawele(id){
var that=this
this.obj=document.getElementById(id),
this.initX=0,
this.initY=0,
this.obj.onmousedown=function(e){
var e=e||window.event;
that.mouseDowntime(e);
document.onmousemove=function(e){
var e=e||window.event;
that.mouseMovetime(e)
}
document.onmouseup=function(e){
var e=e||window.event;
that.mouseup(e)
}
}
}
Drawele.prototype.mouseDowntime=function(event){
this.initX=event.clientX-this.obj.offsetLeft,
this.initY=event.clientY-this.obj.offsetTop
}
Drawele.prototype.mouseMovetime=function(event){
this.obj.style.left=event.clientX-this.initX+'px';
this.obj.style.top=event.clientY-this.initY+'px'
}
Drawele.prototype.mouseup=function(){
document.onmousemove=null;
}
var a=new Drawele('aaa')
var b=new Drawele('dddd')
</script>
</body>
</html>