返回列表

可拖动DOM模型1

默认分类 2011-04-05 20:25:48

转载:http://kenshin54.iteye.com/blog/365660

<

ol start="100" class="dp-xml" style="font-size:1em;line-height:1.4em;margin-top:0px;margin-right:0px;margin-bottom:1px;margin-left:0px;padding-top:2px;padding-right:0px;padding-bottom:2px;padding-left:0px;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(209, 215, 220);border-right-color:rgb(209, 215, 220);border-bottom-color:rgb(209, 215, 220);border-left-color:rgb(209, 215, 220);list-style-type:decimal;list-style-position:outside;list-style-image:initial;background-color:rgb(255, 255, 255);color:rgb(43, 145, 175);">

  • <HTML>  
  • <HEAD>  
  • <TITLE> New Document </TITLE>  
  • <META NAME="Generator" CONTENT="EditPlus">  
  • <META NAME="Author" CONTENT="">  
  • <META NAME="Keywords" CONTENT="">  
  • <META NAME="Description" CONTENT="">  
  • <SCRIPT LANGUAGE="JavaScript">  
  • <!--  
  • /说明:自动判断浏览器是否支持,运行此程序。  
  • 该函数由mousedown事件处理程序中调用它时,它允许用户拖动文档元素。  
  • beginDrag()的第一个参数必须是一个文档元素,该元素用CSS position性质绝对定位。在style性质中,CSS性质的left和top  
  • *必须被明确地设置为像素值,第二个参数是与触发mousedown事件相关的事件对象。  
  • /  
  • function beginDrag(elementToDrag, event) {  
  •   
  • var x = parseInt(elementToDrag.style.left);  
  •     var y = parseInt(elementToDrag.style.top);  
  •   
  • //计算一个点和鼠标点击(event.clientX,event.clientY)的位置之间的距离  
  •     var deltaX = event.clientX - x;  
  •     var deltaY = event.clientY - y;  
  •      
  • if (document.addEventListener) //是否支持2级DOM事件模型  
  • {  
  •   //document.write("该浏览器支持DOM L2事件模型");  
  •   document.addEventListener("mousemove", moveHandler, true);  
  •   document.addEventListener("mouseup", upHandler, true);  
  • }  
  • else if (document.attachEvent) //是否支持IE 5+事件模型  
  • {  
  •   //document.write("该浏览器是IE5+, 不支持DOM L2事件模型");  
  •   document.attachEvent("onmousemove",moveHandler);  
  •   document.attachEvent("onmouseup",upHandler);  
  • }  
  • else  //IE 4事件模型  
  • { //在IE4我们不能使用attachEvent()方法,所以存储了以前赋予的处理程序后,  
  •  //直接赋予新的事件处理程序.这样还可以恢复旧的处理程序.  
  •  //注意:这同样依赖于事件气泡.  
  •   //document.write("该浏览器是IE4");  
  •   var oldmovehandler=document.onmousemove;  
  •   var olduphandler=document.onmouseup;  
  •   document.onmousemove=moveHandler;  
  •   document.onmouseup=upHandler;  
  • }  
  •   
  •   
  • //我们已经处理了该事件,不要让别的元素看到它。  
  • //Event接口还定义了两个方法,即stopPropagation()和preventDefault()  
  •      
  • if (event.stopPropagation)  
  • {  
  •   event.stopPropagation();//stopPropagation()可以阻止事件从当前正在处理它的节点传播。  
  • }else{  
  •   event.cancelBubble=true;  
  • }  
  •   
  •     if (event.preventDefault)  
  •     {  
  •   event.preventDefault();//preventDefault()阻止浏览器执行与事件相关的默认动作  
  • }else{  
  •   event.returnValue=false;  
  • }  
  •       //在2级DOM API中,可以调用preventDefault()方法,与在0级事件模型中返回false一样。(如自定义右键弹出窗口)  
  •   
  •     /  
  •   *这是在元素被拖动时捕捉mousemove事件的处理程序。  
  •      /  
  •     function moveHandler(e) {  
  •   //把元素移到当前的鼠标位置,根据初始鼠标点击的偏移量进行调整。  
  •   if (!e)  
  •   {  
  •    e=window.event;  
  •   }  
  •   elementToDrag.style.left = (e.clientX - deltaX) + "px";  
  •   elementToDrag.style.top = (e.clientY - deltaY) + "px";  
  •   
  •   // And don't let anyone else see this event.  
  •   //不要让别的元素看到该事件。  
  •   if (e.stopPropagation)  
  •   {  
  •    e.stopPropagation();  //DOM  L2  
  •   }else{  
  •    e.cancelBubble=true; //IE  
  •   }  
  •     }  
  •     /  
  •   *该处理程序将捕捉拖移结束时发生的mouseup事件。  
  •      /  
  •     function upHandler(e) {  
  •   
  •   if (!e)  
  •   {  
  •    e=window.event;  
  •   }  
  •   
  •   //注销捕捉事件处理程序。  
  •   if (document.removeEventListener)  
  •   {  
  •   document.removeEventListener("mouseup", upHandler, true);  
  •   document.removeEventListener("mousemove", moveHandler, true);  
  •   }  
  •   else if (document.detachEvent)  
  •   {  
  •    document.detachEvent("onmouseup",upHandler);  
  •    document.detachEvent("onmousemove",moveHandler);  
  •   }else  
  •   {  
  •    document.onmouseup=olduphandler;  
  •    document.onmousemove=oldmovehandler;  
  •   }  
  •    
  •   // 不要让该事件进一步传播。  
  •   if (e.stopPropagation)  
  •   {  
  •    e.stopPropagation();  
  •   }else  
  •   {  
  •    e.cancelBubble=true;  
  •   }  
  • }  
  • }  
  •   
  • //-->  
  • </SCRIPT>  
  • </HEAD>  
  •   
  • <BODY>  
  • <!--定义要拖动的元素-->  
  • <DIV style="position:absolute;left:100px;top:100px;border:solid black;">  
  • <!-- 定义进行拖移的处理程序,注意onmousedown的性质 -->  
  • <DIV style="border-bottom:dotted black;padding:3px;font-family:sans-setif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);">  
  • DRAG ME!!!HELLO!  
  • </DIV>  
  •   
  • <spa