js实现右键弹出可以拖动的窗口

js实现右键弹出可以拖动的窗口

sparta-紫杉  2010-4-17 16:37

一、判断浏览器类别，以便根据不同的浏览器类型编写兼容代码（该段代码来自李战）。

< script type = " text/javascript " >  
  
  var  Sys  =   {} ; 
  var  ua  =  navigator.userAgent.toLowerCase(); 
  var  s; 
 (s  =  ua.match( / msie ([\d.] + ) / ))  ?  Sys.ie  =  s[ 1 ] : 
 (s  =  ua.match( / firefox\ / ([\d.] + ) / ))  ?  Sys.firefox  =  s[ 1 ] : 
 (s  =  ua.match( / chrome\ / ([\d.] + ) / ))  ?  Sys.chrome  =  s[ 1 ] : 
 (s  =  ua.match( / opera.([\d.] + ) / ))  ?  Sys.opera  =  s[ 1 ] : 
 (s  =  ua.match( / version\ / ([\d.] + ). * safari / ))  ?  Sys.safari  =  s[ 1 ] :  0 ; 
 
</ script >  

二、通过下面三段代码来完成捕获鼠标事件的坐标位置(确定弹出窗口的坐标位置)

< script >

function  mouseClick(ev) {
 ev = ev || window.event;
 var mousePos = mouseCoords(ev);
 X = mousePos.x;
 Y = mousePos.y;
}

function  mouseCoords(ev) {
        //下面3行代码兼容火狐浏览器。
 if(ev.pageX || ev.pageY){
  return {x:ev.pageX, y:ev.pageY};
 }
 return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop - document.body.clientTop
 };
}

document.onmousedown  =  mouseClick;

</ script >

三、右键内容弹出(兼容Maxthon、FF浏览器)

< script >

function  disDiv() {
  var popmenu = document.getElementById('PopMenu');

 if(Sys.firefox){
  popmenu.style.top = Y + 'px';
  popmenu.style.left = X + 'px';
  popmenu.style.visibility = '';
 }else{
  popmenu.style.top = event.clientY+'px';
  popmenu.style.left = event.clientX+'px';
  popmenu.style.visibility = '';
 }

}
</ script >

页面无素“PopMenu”是一个Html的DIV元素，代码如下：

<!--  右键弹出对象窗口  -->   
< div   id ="PopMenu"  style ="position:absolute; width:537px;    
      height:259px;    z-index:3; visibility:hidden; font-size: 120%;" >
            
   < div  id ="PopHandle"  style ="background:#FFCB2D;" >
        
   < table  width ="535"  height ="251"  border ="0" >
     < tr >
       < td  colspan ="7"  scope ="col" >
         < table  width ="532"  border ="0" >
             < tr >
                 < td  width ="31"  height ="20"  bgcolor ="#0066FF" >
                   < img  src ="<%=request.getContextPath()%>/img/nodeDef/cancel.gif"  onClick ="closes()"   />
                 </ td >
             </ tr >
         </ table >           
       </ td >
     </ tr >
     < tr >
       < th  width ="45"  scope ="col" > 序号 </ th >
       < th  width ="141"  scope ="col" > 成本节点名称 </ th >
       < th  width ="95"  scope ="col" > 费用(万元) </ th >
       < th  width ="239"  scope ="col" > 工作量 </ th >
     </ tr >

     < tr >
       < td  align ="center"  valign ="middle" > 1 </ td >
       < td > 常用材料费 </ td >
       < td  align ="center"  valign ="middle" > 20 </ td >
       < td  align ="center"  valign ="middle" > 本周工作量上马工程，30吨。 </ td >
     </ tr >
    
    ……
   </ table >
          
   </ div >
        
</ div >

四、拖动右键弹出窗口

<!--  拖动窗口要使用到一个js组件dom - drag.js，有意者请到网络上下载。  -->
< script type = " text/javascript "  language = " javascript "  src = " js/dom-drag.js " ></ script >
< script >
function  initDomDrag(handleID, rootID)  {
    var handle = document.getElementById(handleID);
    var root = document.getElementById(rootID);
    Drag.init(handle, root); 
}

      //拖动右键弹出对象初始化（PopMenu和PopHandle请参见本文中的那段html代码，分别是该段html代码中的两个div的标识）
      initDomDrag("PopHandle", "PopMenu");

</ script >

dom-drgs.js可通过百度该关键词查找并下载，也可以通过本地址/Files/SpartaYew/dom-drag.txt(因为不能上传以.js为后缀的文件，因此后缀名修改为.txt)进行下载。

五、关闭右键弹出窗口

< script >

function  closes() {
 var popmenu = document.getElementById('PopMenu');
 popmenu.style.visibility='hidden';
}
 
</ script >

            －东营 sparta-紫杉 原创，转载请注明出处 ：）
            http://www.blogjava.net/SpartaYew/
            [email protected]  
             QQ:2 20 86526