drag.js

单服务台排队系统仿真程序.该程序采用的是事件调度法

function beginDrag(elementToDrag,event)  {
	var delatX = event.clientX-parseInt(elementToDrag.style.left);
	var delatY = event.clientY-parseInt(elementToDrag.style.top);

	if (document.addEventListener) {	//如果可以使用2级DOM事件模型,IE不支持
		//设置事件处理程序
		document.addEventListener("mousemove", moveHandler, true);
		document.addEventListener("mouseup", upHandler, true);
	}else if(document.attachEvent) { //IE5+ 的事件模型
		//在IE事件模型中，我们不能捕捉事件，所以只有当事件起泡到这些处理程序时,
		//它们才被触发. 假设不存在干涉元素, 处理了事件后它们就停止传播
		document.attachEvent("onmousemove", moveHandler);
		document.attachEvent("onmouseup", upHandler);
	}
	else { //IE4事件模型
		//IE4不能使用attachEvent方法,所以存储了以前赋予的处理
		//程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序.
		//注意,这样依赖于事件起泡.
		var oldmovehandler=document.onmousemove;
		var olduphandler=document.onmouseup;
		document.onmousemove=moveHandler;
		document.onmouseup=upHandler;
	}

	//我们处理了该事件,不要再让其他元素看见.
	if (event.stopPropagation) event.stopPropagation(); //2 级DOM
	else event.cancelBubble=true;	//IE
	//下面禁止执行默认动作
	if (event.preventDefault) event.preventDefault();  //2级DOM
	else event.returnValue=false;	//IE

	/*  这是元素被拖动时捕捉mousemove事件的处理程序.它负责移动元素 */
	function moveHandler(e)  {
		if(!e) e=window.event;	//IE事件模型;
		//把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
		elementToDrag.style.left=(e.clientX-delatX)+"px";
		elementToDrag.style.top=(e.clientY-delatY)+"px";
		//不要再让其他元素看到该事件.
		if(e.stopPropagation) e.stopPropagation();  //2级DOM
		else e.cancelBubble=true;	//IE
	}

	/*  这是捕捉拖移结束最后发生的mouseup事件的处理程序. */
	function upHandler(e) {
		if(!e) e=window.event;	//IE事件模型.
		//注销捕捉事件程序.
		if (document.removeEventListener) {	//DOM事件模型
			document.removeEventListener("mouseup", upHandler,true);
			document.removeEventListener("mousemove", moveHandler,true);	
		}
		else if(document.detachEvent) {	//IE5+ 事件模型
			document.detachEvent("onmouseup", upHandler);
			document.detachEvent("onmousemove", moveHandler);
		}
		else  {	//IE事件模型
			document.onmouseup = olduphandler;
			document.onousemove = oldmovehandler;
		}
		//不要再让事件进一步传播.
		if (e.stopPropagation) e.stopPropagation();  //2级DOM
		else e.cancelBubble=true;	//IE
	}	
}