例子如下：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
getEvent: function(event){
return event?event:window.event;
},
getTarget:function(event){return event.target||event.srcElement;},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent)
{
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
}
function EventTarget(){
this.handlers={};
}
EventTarget.prototype={
constructor:EventTarget,
addHandler: function(type,handler){
if(typeof this.handlers[type]=="undefined"){
this.handlers[type]=[];
}
this.handlers[type].push(handler);
},
fire:function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length; i<len; i++){
handlers[i](event);
}
}
},
removeHandler:function(type,handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i=0,len=handlers.length; i<len; i++){
if(handlers[i] === handler){
break;
}
}
handlers.splice(i,1);
}
}
};
</script>
</head>
<body>
<div id="status"></div>
<div class="draggable" style="position:absolute;background:red;width:100px;height:100px;" id="myDiv"></div>
<script type="text/javascript">
var DragDrop = function(){
var dragdrop = new EventTarget();
var dragging = null;
var diffX =0;
var diffY =0;
function handleEvent(event){
event = EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
switch(event.type){
case "mousedown":
if(target.className.indexOf("draggable")>-1){
dragging = target;
diffX =event.clientX -target.offsetLeft;
diffY = event.clientY -target.offsetTop;
dragdrop.fire({type:"dragstart",target:dragging,x:event.clientX,y:event.clientY});
}
break;
case "mousemove":
if(dragging != null){
event = EventUtil.getEvent(event);
dragging.style.left= (event.clientX-diffX)+"px";
dragging.style.top= (event.clientY-diffY)+"px";
dragdrop.fire({type:"drag",target:dragging,x:event.clientX,y:event.clientY});
}
break;
case "mouseup":
dragdrop.fire({type:"dragend",target:dragging,x:event.clientX,y:event.clientY});
dragging = null;
break;
}
};
dragdrop.enable = function(){
EventUtil.addHandler(document,"mousedown",handleEvent);
EventUtil.addHandler(document,"mousemove",handleEvent);
EventUtil.addHandler(document,"mouseup",handleEvent);
};
dragdrop.disable = function(){
EventUtil.removeHandler(document,"mousedown",handleEvent);
EventUtil.removeHandler(document,"mousemove",handleEvent);
EventUtil.removeHandler(document,"mouseup",handleEvent);
};
return dragdrop;
}();
DragDrop.addHandler("dragstart",function(event){
var status=document.getElementByIdx_x("status");
status.innerHTML = "Started dragging" + event.target.id;
});
DragDrop.addHandler("drag",function(event){
var status=document.getElementByIdx_x("status");
status.innerHTML += "<br/>Dragged"+event.target.id+"to ("+event.x + "," + event.y + ")";
});
DragDrop.addHandler("dragend",function(event){
var status=document.getElementByIdx_x("status");
status.innerHTML += "<br/>Drogged" + event.target.id + "at (" +event.x + "," + event.y +")";
});
DragDrop.enable();
//DragDrop.disable();
</script>
</body>
</html>
