function beginDrag(elementToDrag,event) { var =event.clientX-parseInt(elementToDrag.style.left); var deltaY=event.clientY-parseInt(elementToDrag.style.top); //这儿的deltaX/Y实际上就是得出鼠标和div的坐标差。 if(document.addEventListener) //之所以在这儿加这样一个判断，是因为IE6和firefox对于javascript的事件处理有不同的方法（IE7之后的版本开始符合W3C的标准）。 //document.addEventlistener如果是true的话，那就是firefox等支持W3C DOM标准的浏览器，IE6中注册事件用attachEvent，而firefox等浏览器则是用addEventListener，语法如下所示。addEventListener函数的true参数表示可以捕捉事件。 { document.addEventListener("mousemove",moveHandler,true); document.addEventListener("mouseup",upHandler,true); //document.addEventListener("mouseout",upHandler,true); } else if(document.attachEvent) { document.attachEvent("onmousemove",moveHandler); document.attachEvent("onmouseup",upHandler); //document.attachEvent("onmouseout",upHandler); } if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true; //这儿的判断依然是考虑了不同的浏览器，stopPropagation是W3C DOM标准中使用的一个方法，用来取消事件的传播。我们使用了document.addEventListener这个方法，浏览器会从document对象沿着DOM节点向下传播到目标节点，注册的事件处理程序就会运行，然后事件会回传到父节点，如果父节点也有相应的事件处理程序，那么事件也会处理，为了避免这种情况，我们可以用stopPropagation来阻止事件的传播，这个方法的作用就是让其他元素对这个事件不可见。在IE6下，并没有元素捕捉事件的过程，不过有这个术语叫做起泡的过程，IE6中所用的方法就是cancelBubble，用来取消起泡，表示这个事件已被处理，其他元素不用再看见了。 if(event.preventDefault) event.preventDefault(); else event.returnValue=false; //这儿的preventDefault用来通知浏览器不要执行与事件关联的默认动作，returnValue用来取消发生事件的源元素的默认动作，大家应该能看出这是在不同浏览器下发挥相同的作用。 //以下就是拖动div中所用的关键函数了。 function moveHandler(e) { 　　 if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event 　　 //全局属性，否则就用DOM二级标准的Event对象。 //在IE中，event是window的一个属性，也就是一个全局变量，但是在W3C DOM中，event是发生事件的文档对象的属性。在这个程序中，event是什么并不重要，关键是我们要取得鼠标的坐标值，在IE中，e这个参数传进来的时候，IE认不出来，所以我们就给e赋值为window.event。 elementToDrag.style.left=(e.clientX-deltaX)+"px"; elementToDrag.style.top=(e.clientY-deltaY)+"px"; //这儿就是改变现在正在作用的div的left和top属性。 if(e.stopPropagation) e.stopPropagation(); else e.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 (!e) e=window.event; if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble=true; } } 脚本之家 编辑注：如果不能正常运行 注意字符的替换，因为好多网站为了安装都将字符转换成了中文下的标点符号。本站也尽量的替换。

　　推荐阅读

　　JQuery 风格的HTML文本转义

那么，我需要一个方法转义。网上搜了一下，大部分是自己编写一个正则替换。不过我的习惯是尊重既有的资源。有人提出可以用dom的功能。先作为innerTEXT传给一个dom对象，再取innerHTML属性，就可以取到转义后的文本>>>详细阅读

本文标题：javascript 可以拖动的DIV（二）

地址：http://www.17bianji.com/kaifa2/JS/28539.html

 1/2    1