Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • 兼容ie和firefox的drag

    post by onelong / 2009-12-22 23:23 Tuesday [javascript]

    <html>  
      <head>   
      <style type="text/css">  
      #drag{  
      width:100px;  
      height:20px;  
      background-color:#eee;  
      border:1px solid #333;  
      position:absolute;  
      top:30px;  
      left:200px;  
      text-align:center;  
      cursor:default;  
      }  
      </style>  
      <script type="text/javascript">   
      window.onload=function(){  
      drag(document.getElementById('drag'));  
      };  
      function drag(obj){  
      obj.onmousedown=function(e){  
      var d=document;
      if(!e){
          e=window.event;
          } 
      var x=e.layerX?e.layerX:e.offsetX;
      var y=e.layerY?e.layerY:e.offsetY;
      //layerX和layerY是Netscape的事件属性,表示事件相对于包容图层的X坐标和Y坐标,在IE中它们则是offsetX和offsetY。 
      if(obj.setCapture){  
          obj.setCapture();  
      //setCapture() 和captureEvents()分别是IE和Netscape进行设置事件捕获源的函数,在设置onmousemove和 onmouseup事件处理程序前必须使用,IE的setCapture可以针对某个特定的元件设置事件捕获,而Netscape中只能对整个文档设置,这将会导致一些问题。对应的停止捕捉事件函数为releaseCapture()和captureEvents()。 
      }else if(window.captureEvents){ 
      window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
      }  
       
      obj.onmousemove=function(e){  
      if(!e){e=window.event; }
      if(!e.pageX){e.pageX=e.clientX;}  
      if(!e.pageY){e.pageY=e.clientY;}  // clientX、clientY以及pageX、pageY分别是IE和Netscape中事件发生位置相对于浏览器页面的X坐标和Y坐标
      var tx=e.pageX-x,ty=e.pageY-y;  
      obj.style.left=tx;  
      obj.style.top=ty;  
      };  
       
      obj.onmouseup=function(){  
      if(obj.releaseCapture){  
      obj.releaseCapture();  
      }else if(window.captureEvents){  
      window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}   
      obj.onmousemove=null;  
      obj.onmouseup=null; 
      };  
      };  
      }  
      </script>   
      <body>  
      <div id="drag">drag me<div>  
      </body>  
      </html>
    要拖动的层中包含的是一张图片而不再是文字,这样在IE中仍可以正常拖动,而在FireFox中会发生异常,点下鼠标、拉动、并松开后,层并没有停止拖动,而是跟随着鼠标。
    Netscape的captureEvent()不能捕获某个特定元件的事件,当点下鼠标并拉动时时,FireFox会认为要拖动的对象是层里的图片,该操作无效。 要解决这个问题,只要把图片上的鼠标点下事件设置为无效,在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。

    引用地址:
     

    我要评论