JavaScript
- // JScript 文件
- /***********************窗口拖动************************/
- function beginDrag(elementToDrag,event)
- {
- //计算元素原左上角与鼠标的距离
- //moveHandler要这值
- /*计算对象与鼠标之间的距离,x,y坐标*/
- var delatX=event.clientX-parseInt(elementToDrag.style.left);
- var delatY=event.clientY-parseInt(elementToDrag.style.top);
- //注册响应mousemove和mousedown事件后的mouseup事件的处理程序
- if(document.addEventListener)
- { //2级DOM事件模型
- //注册捕捉事件处理程序
- document.addEventListener("mousemove",moveHandler,true); //添加事件,并设置事件的相应顺序 true为先执行 moveHandler()
- 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.οnmοusemοve=moveHandler;
- document.οnmοuseup=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"; //e.clientX 鼠标位置
- 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.οnmοuseup=olduphandler;
- document.onousemove=oldmovehandler;
- }
- //不要再让事件进一步传播.
- if(e.stopPropagation) e.stopPropagation(); //2级DOM
- else e.cancelBubble = true; //IE
- }
- }
Html代码:
- <body>
- <div id="objPlay" style=" background-color:Yellow; width: 200px; height: 200px; position: absolute; left: 0px;
- top: 0px; z-index: 1; position:absolute;top:200px;left:200px" onmousedown="beginDrag(this,event);">
- </div>
- <div id="Div1" style=" background-color:Yellow; width: 200px; height: 200px; position: absolute; left: 0px;
- top: 0px; z-index: 1;position:absolute;top:400px;left:400px" onmousedown="beginDrag(this,event);">
- </div>
- </body>