导航栏： 首页 评论列表

可拖动DOM模型1

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

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

  1. <HTML>  
  2. <HEAD>  
  3. <TITLE> New Document </TITLE>  
  4. <META NAME="Generator" CONTENT="EditPlus">  
  5. <META NAME="Author" CONTENT="">  
  6. <META NAME="Keywords" CONTENT="">  
  7. <META NAME="Description" CONTENT="">  
  8. <SCRIPT LANGUAGE="JavaScript">  
  9. <!--  
  10. /说明：自动判断浏览器是否支持，运行此程序。  
  11. 该函数由mousedown事件处理程序中调用它时，它允许用户拖动文档元素。  
  12. beginDrag()的第一个参数必须是一个文档元素，该元素用CSS position性质绝对定位。在style性质中，CSS性质的left和top  
  13. *必须被明确地设置为像素值，第二个参数是与触发mousedown事件相关的事件对象。  
  14. /  
  15. function beginDrag(elementToDrag, event) {  
  16.   
  17. var x = parseInt(elementToDrag.style.left);  
  18.     var y = parseInt(elementToDrag.style.top);  
  19.   
  20. //计算一个点和鼠标点击(event.clientX,event.clientY)的位置之间的距离  
  21.     var deltaX = event.clientX - x;  
  22.     var deltaY = event.clientY - y;  
  23.      
  24. if (document.addEventListener) //是否支持2级ＤＯＭ事件模型  
  25. {  
  26.   //document.write("该浏览器支持DOM L2事件模型");  
  27.   document.addEventListener("mousemove", moveHandler, true);  
  28.   document.addEventListener("mouseup", upHandler, true);  
  29. }  
  30. else if (document.attachEvent) //是否支持IE 5+事件模型  
  31. {  
  32.   //document.write("该浏览器是IE5+, 不支持DOM L2事件模型");  
  33.   document.attachEvent("onmousemove",moveHandler);  
  34.   document.attachEvent("onmouseup",upHandler);  
  35. }  
  36. else  //ＩＥ　４事件模型  
  37. { //在IE4我们不能使用attachEvent()方法，所以存储了以前赋予的处理程序后，  
  38. 　//直接赋予新的事件处理程序．这样还可以恢复旧的处理程序．  
  39. 　//注意：这同样依赖于事件气泡．  
  40.   //document.write("该浏览器是IE4");  
  41.   var oldmovehandler=document.onmousemove;  
  42.   var olduphandler=document.onmouseup;  
  43.   document.onmousemove=moveHandler;  
  44.   document.onmouseup=upHandler;  
  45. }  
  46.   
  47.   
  48. //我们已经处理了该事件，不要让别的元素看到它。  
  49. //Event接口还定义了两个方法，即stopPropagation()和preventDefault()  
  50.      
  51. if (event.stopPropagation)  
  52. {  
  53.   event.stopPropagation();//stopPropagation()可以阻止事件从当前正在处理它的节点传播。  
  54. }else{  
  55.   event.cancelBubble=true;  
  56. }  
  57.   
  58.     if (event.preventDefault)  
  59.     {  
  60.   event.preventDefault();//preventDefault()阻止浏览器执行与事件相关的默认动作  
  61. }else{  
  62.   event.returnValue=false;  
  63. }  
  64.       //在2级DOM API中，可以调用preventDefault()方法，与在0级事件模型中返回false一样。（如自定义右键弹出窗口）  
  65.   
  66.     /  
  67.   *这是在元素被拖动时捕捉mousemove事件的处理程序。  
  68.      /  
  69.     function moveHandler(e) {  
  70.   //把元素移到当前的鼠标位置，根据初始鼠标点击的偏移量进行调整。  
  71.   if (!e)  
  72.   {  
  73.    e=window.event;  
  74.   }  
  75.   elementToDrag.style.left = (e.clientX - deltaX) + "px";  
  76.   elementToDrag.style.top = (e.clientY - deltaY) + "px";  
  77.   
  78.   // And don't let anyone else see this event.  
  79.   //不要让别的元素看到该事件。  
  80.   if (e.stopPropagation)  
  81.   {  
  82.    e.stopPropagation();  //ＤＯＭ　　L2  
  83.   }else{  
  84.    e.cancelBubble=true; //IE  
  85.   }  
  86.     }  
  87.     /  
  88.   *该处理程序将捕捉拖移结束时发生的mouseup事件。  
  89.      /  
  90.     function upHandler(e) {  
  91.   
  92.   if (!e)  
  93.   {  
  94.    e=window.event;  
  95.   }  
  96.   
  97.   //注销捕捉事件处理程序。  
  98.   if (document.removeEventListener)  
  99.   {  
  100.   document.removeEventListener("mouseup", upHandler, true);  
  101.   document.removeEventListener("mousemove", moveHandler, true);  
  102.   }  
  103.   else if (document.detachEvent)  
  104.   {  
  105.    document.detachEvent("onmouseup",upHandler);  
  106.    document.detachEvent("onmousemove",moveHandler);  
  107.   }else  
  108.   {  
  109.    document.onmouseup=olduphandler;  
  110.    document.onmousemove=oldmovehandler;  
  111.   }  
  112.    
  113.   // 不要让该事件进一步传播。  
  114.   if (e.stopPropagation)  
  115.   {  
  116.    e.stopPropagation();  
  117.   }else  
  118.   {  
  119.    e.cancelBubble=true;  
  120.   }  
  121. }  
  122. }  
  123.   
  124. //-->  
  125. </SCRIPT>  
  126. </HEAD>  
  127.   
  128. <BODY>  
  129. <!--定义要拖动的元素-->  
  130. <DIV style="position:absolute;left:100px;top:100px;border:solid black;">  
  131. <!-- 定义进行拖移的处理程序，注意onmousedown的性质 -->  
  132. <DIV style="border-bottom:dotted black;padding:3px;font-family:sans-setif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);">  
  133. DRAG ME!!!HELLO!  
  134. </DIV>  
  135.   
  136. <spa


    >> 留言评论