<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<title>Drag</title>
<meta http-equiv=
"Content-Type"
content=
"text/html;charset=utf-8"
>
<style>
#myDiv{width:50px; height:50px; background-color:red}
</style>
</head>
<body>
<div id=
"myDiv"
></div>
</body>
<script type=
"text/javascript"
>
var
isIE = document.all ? true : false;
function
addEventHandler(oTarget, sEventType, fnHandler){
if
(oTarget.addEventListener){
oTarget.addEventListener(sEventType, fnHandler, false);
}
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
BindAsEventListener =
function
(object, fun) {
return
function
(event) {
return
fun.call(object, (event || window.event));
}
}
var
$ =
function
(id){
return
document.getElementById(id);
}
var
Class = {
create:
function
() {
return
function
() {this.initialize.apply(this, arguments);}
}
}
var
drag = Class.create();
drag.prototype = {
initialize:
function
(id){
this._drag = $(id);
this._flag = false;
addEventHandler(this._drag,
'mousedown'
,BindAsEventListener(this,this.start));
this._fM = BindAsEventListener(this, this.move);
this._fS = BindAsEventListener(this, this.stop);
this._drag.style.position =
"absolute"
;
},
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);
if
(isIE){
addEventHandler(this._drag,
"losecapture"
, this._fS);
this._Handle.setCapture();
}
else
{
addEventHandler(window,
"blur"
, this._fS);
oEvent.preventDefault();
}
},
move:
function
(oEvent){
this._drag.style.left = oEvent.clientX - this._x +
"px"
;
this._drag.style.top = oEvent.clientY - this._y +
"px"
;
},
stop:
function
(){
removeEventHandler(document,
'mousemove'
, this._fM);
removeEventHandler(document,
'mouseup'
, this._fS);
if
(isIE){
removeEventHandler(this._drag,
"losecapture"
, this._fS);
this._Handle.releaseCapture();
}
else
{
removeEventHandler(window,
"blur"
, this._fS);
}
}
}
var
ndrag =
new
drag(
"myDiv"
);
</script>
</html>