以下代码可正常作用于ie 6,7,8及ff3,大家研究如何优化,以及使_self为非全局变量。
var _self;
function Drag(obj, e){
this.obj = obj;
this.offX = 0;
this.offY = 0;
_self = this;
_self.startDrag(e);
}
Drag.prototype = {
addEvent:function(o, t, f){
if(o.attachEvent){
o.attachEvent("on"+t, f);
}else if(o.addEventListener){
o.addEventListener(t, f, false);
}else{
o["on"+t] = f;
}
},
removeEvent:function(o, t, f){
if(o.detachEvent){
o.detachEvent("on"+t, f);
}else if(o.removeEventListener){
o.removeEventListener(t, f, false);
}else{
delete o["on"+t];
}
},
offset:function(obj){
var _left,_top;
_left = obj.offsetLeft;
_top = obj.offsetTop;
while(obj = obj.offsetParent){
  _left += obj.offsetLeft;
  _top += obj.offsetTop;
}
return (eval("({left:"+_left+",top:"+_top+"})"));
},
startDrag:function(e){
var e= e || window.event;
var offset = _self.offset(_self.obj);
_self.offX = e.clientX - offset.left;
_self.offY = e.clientY - offset.top;
offset = null;
_self.addEvent(document, "mousemove", _self.doDrag);
_self.addEvent(document, "mouseup", _self.stopDrag);
},
stopDrag:function(){
_self.removeEvent(document, "mousemove", _self.doDrag);
_self.removeEvent(document, "mouseup", _self.stopDrag);
},
doDrag:function(e){
var e = e || window.event;
var cx,cy,dx,dy,cw,ch,dw,dh;
cx = e.clientX;
cy = e.clientY;
dx = cx - _self.offX;
dy = cy - _self.offY;
cw = document.body.clientWidth;
ch = document.body.clientHeight + document.body.scrollTop;
dw = _self.obj.offsetWidth;
dh = _self.obj.offsetHeight;
_self.obj.style.left = Math.min(Math.max(dx,0),Math.max((cw - dw),0))+"px";
_self.obj.style.top = Math.min(Math.max(dy,30),Math.max((ch - dh), 30))+"px";
}
};
使用方法示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>
<script type="text/javascript" src="Drag.js"></script>
<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;}
.test{width:200px;height:40px;background-color:#333333;cursor:move;position:absolute;left:0;top:30px;}
</style>
</head>
<body>
<div class="test" id="test" onmousedown="new Drag(this, event);"></div>
</body>
</html>