Drag複習：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Drag 2 </title>
</head>
<style type="text/css">
*{ margin: 0; padding: 0;}
body{ width: 100%; height: 100%;}
#Drag{ cursor: move; width: 120px; height: 120px; border: 1px solid #ddd; background: #f2f2f2; z-index: 10; font-size: 12px;}
</style>
<script type="text/javascript">
var isIe = (document.all) ? true : false;
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
//prototype Class
var Class = {
create : function (){
return function(){ this.initialize.apply(this,arguments); }
}
};
var Bind = function(object,fun){
return function(){
return fun.apply(object,arguments);
}
}
var BindAsEventListener = function(object,fun){
return function(event){
return fun.call(object, (event || window.event));
}
}
function addEventHandler(oTarget , sEventType , fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType, fnHandler);
} else if(oTarget.attachEvent){
oTarget.attachEvent("on" + sEventType , fnHandler);
}else{
oTarget["on" + sEventType] = fnHandler;
}
}
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
var _Drag = Class.create();
_Drag.prototype = {
initialize : function(drag){
this.Drag = $(drag)
this._x = this._y = 0;
this._fM = BindAsEventListener(this,this.Move);
this._fS = BindAsEventListener(this,this.Stop);
this.Drag.style.position = "absolute";
addEventHandler(this.Drag , "mousedown",BindAsEventListener(this, this.Start));
},
Start : function(oEvent){
this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;
addEventHandler(document,"mousemove",this._fM);
addEventHandler(document,"mouseup",this._fS);
},
Move : function(oEvent){
this.Drag.style.left = oEvent.clientX - this._x + "px";
this.Drag.style.top = oEvent.clientY - this._y + "px";
this.Drag.innerHTML = "X:" + oEvent.clientX + ",Y:" + oEvent.clientY;
},
Stop : function(){
removeEventHandler(document,"mousemove",this._fM);
removeEventHandler(document,"mouseup",this._fS);
}
};
window.onload = function(){
new _Drag("Drag");
}
</script>
<body>
<div id="Drag"></div>
</body>
</html>