这年头写js的人是越来越少了,一方面大部分的效果网上都有,另外一方面好多js框架可以用。我想知其然还要知其所以然,废话不多说,上代码..注释很详细: 仅兼容IE:
/* 该函数由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;" onmousedown="beginDrag(this.parentNode,event);"> 拖动我 </div> <div> <p>This is a test.Testing,testing</p></div> </div> </body> 兼容火狐的拖动DOM元素的js: function beginDrag(elementToDrag,event) { var deltaX=event.clientX-parseInt(elementToDrag.style.left); var deltaY=event.clientY-parseInt(elementToDrag.style.top); if(document.addEventListener) { document.addEventListener("mousemove",moveHandler,true); document.addEventListener("mouseup",upHandler,true); } else if(document.attachEvent) { document.attachEvent("onmousemove",moveHandler); document.attachEvent("onmouseup",upHandler); } if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true; if(event.preventDefault) event.preventDefault(); else event.returnValue=false; function moveHandler(e) { if (!e) e=window.event; //如果是IE的事件对象,那么就用window.event //全局属性,否则就用DOM二级标准的Event对象。 elementToDrag.style.left=(event.clientX-deltaX)+"px"; elementToDrag.style.top=(event.clientY-deltaY)+"px"; if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true; } function upHandler(e) { if(document.removeEventListener) { document.removeEventListener("mouseup",upHandler,true); document.removeEventListener("mousemove",moveHandler,true);} else { document.detachEvent("onmouseup",upHandler); document.detachEvent("onmousemove",moveHandler);} } if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true; }
|