二、 IE中拖动DOM元素的例子
/* 该函数由mousedown事件处理调用 它为随后发生的mousemove和mouseup事件注册了临时的捕捉事件处理程序 并用这些事件处理程序拖动指定的文档元素 第二个参数必须是mousedown事件的事件对象 */ function beginDrag(elementToDrag,event) { //该元素当前位于何处 //该元素的样式性质必须具有left和top CSS属性 //此外,我们假定他们用象素做单位 //var x=parseInt(elementToDrag.style.left); //var y=parseInt(elementToDrag.style.top); //计算一个点和鼠标点击之间的距离,下面的嵌套的moveHandler函数需要这些值 var deltaX=event.clientX-parseInt(elementToDrag.style.left); var deltaY=event.clientY-parseInt(elementToDrag.style.top); // 注册mousedown事件后发生的mousemove和mouseup事件的处理程序 // 注意,它们被注册为文档的捕捉事件处理程序 // 在鼠标按钮保持按下的状态的时候,这些事件处理程序保持活动的状态 // 在按钮被释放的时候,它们被删除 document.attachEvent("onmousemove",moveHandler); document.attachEvent("onmouseup",upHandler); //我们已经处理了该事件,不要让别的元素看到它 event.cancelBubble=true; event.returnValue=false; /* 这是在元素被拖动时候捕捉mousemove事件的处理程序,它响应移动的元素 */ function moveHandler(e) { //把元素移动到当前的鼠标位置 e=window.event; elementToDrag.style.left=(event.clientX-deltaX)+"px"; elementToDrag.style.top=(event.clientY-deltaY)+"px"; //不要让别的元素看到该事件 event.cancelBubble=true; } /* 该事件将捕捉拖动结束的时候发生的mouseup事件 */ function upHandler(e) { //注销事件处理程序 document.detachEvent("onmouseup",upHandler); document.detachEvent("onmousemove",moveHandler);} event.cancelBubble=true; } 调用它的HTML文件代码: <html> <head> <title>Untitled Page</title> <script type="text/javascript" src="dragIE.js"></script> </head> <body> <div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;"> <div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" > 拖动我 </div> <div> <p>This is a test.Testing,testing</p></div> </div> </body>
出处:蓝色理想
责任编辑:moby
上一页 IE Event对象 下一页 DOM中的高级事件处理
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|