<div id="md1" _z=1 style='position:absolute;width:200;height:200;background:black;left:0px;top:200px' class="moveable">aa</div>
<div id="md2" style='position:absolute;width:200;height:200;background:blue;left:400px;top:200px' class="moveable">blue</div>
<script>
for(var i in divs=document.getElementsByTagName("div"))if((d=divs[i]).className=="moveable"){
//event for Drag start
d.onmousedown = function (e){
this.catched=true;
var x,y;
if(!document.all){
x=e.pageX;
y=e.pageY;
}else{
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
}
this._x=x;
this._y=y;
this._cx=x-parseInt(this.style.left);
this._cy=y-parseInt(this.style.top);
};
d.onmouseup = function (){
this.catched=false;
};
d.onmousemove = function(e){
if(this.catched){
var x,y;
if(!document.all){
x=e.pageX;
y=e.pageY;
}else{
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
}
this.style.left=(x-this._cx)+"px";
this.style.top=(y-this._cy)+"px";
}
};
//event for Drag end
}
</script>
简单封装了一下。
发现在ie和ff中，对象d的扩展属性不一致，
上下文中，ie认为this是那个div节点，_x是节点属性，而ff认为不是，而是this本身的属性，有差异。
规范参考：http://www.mozilla.org/docs/dom/domref/