遮罩层拖动有关问题

2012-02-07

遮罩层拖动问题HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w

遮罩层拖动问题

HTML code

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="http://www.w3.org/1999/xhtml" > 
  <head> 
      <title>测试 </title> 
  <script type="text/javascript"> 
  function popup(str,popWidth,popHeight){ 
     var titleDivHeight=15; 
     var contentDivHeight=popHeight-20; 
     var borderColor="#6699cc"; 
     var titleDivColor="#709CD2"; 
     var maskDivWidth=document.body.offsetWidth; 
     var maskDivHeight=screen.height; 
     var maskDiv=document.createElement("div"); 
     maskDiv.setAttribute('id','maskDiv'); 
     maskDiv.style.position="absolute"; 
     maskDiv.style.background="#f2f2f2"; 
     maskDiv.style.top="0"; 
     maskDiv.style.left="0"; 
     maskDiv.style.width="100%"; 
     maskDiv.style.height=maskDivHeight + "px"; 
     maskDiv.style.zIndex = "10000"; 
     document.body.appendChild(maskDiv); 
     var containerDiv=document.createElement("div"); 
     containerDiv.setAttribute("id","containerDiv"); 
     containerDiv.setAttribute("align","center"); 
     containerDiv.style.background="white"; 
     containerDiv.style.border="1px solid " + borderColor; 
     containerDiv.style.position = "absolute"; 
     containerDiv.style.left = parseInt((document.body.offsetWidth-popWidth)/2)+"px"; 
     containerDiv.style.top = parseInt((document.body.offsetHeight-popHeight)/2)+10+"px"; 
     containerDiv.style.font="12px Arial"; 
     containerDiv.style.width = popWidth + "px"; 
     containerDiv.style.height =popHeight + "px"; 
     containerDiv.style.zIndex = "10001"; 
     document.body.appendChild(containerDiv); 
     var titleDiv=document.createElement("div"); 
     titleDiv.setAttribute("id","titleDiv"); 
     titleDiv.setAttribute("align","right"); 
     titleDiv.style.margin="0"; 
     titleDiv.style.padding="4px 0"; 
     titleDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
     titleDiv.style.opacity="65%"; 
     titleDiv.style.background=titleDivColor; 
     titleDiv.style.border="1px solid " + borderColor; 
     titleDiv.style.height=titleDivHeight+"px"; 
     titleDiv.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
     titleDiv.style.color="white"; 
     titleDiv.style.cursor="move"; 
     var beginMoving=false; 
     /*----------------------------------问题所在------------------------------------------*/ 
     titleDiv.onmousedown=function(e){ 
                                          beginMoving=true; 
                                          var e=e||window.event; 
                                          var Parent=titleDiv.offsetParent;  
 
                                          titleDiv.mouseDownX=Parent.offsetLeft-e.clientX; 
                                          titleDiv.mouseDownY=Parent.offsetTop-e.clientY; 
                                          if(titleDiv.setCapture)titleDiv.setCapture(); 
                                          else e.preventDefault(); 
                                      }; 
     titleDiv.onmousemove=function(e){ 
                                         if(!beginMoving)return; 
                                         var e=e||window.event; 
                                         var Parent=titleDiv.offsetParent; 
                                         if(e.clientX>1) 
                                         Parent.style.left = titleDiv.mouseDownX+e.clientX; 
                                         if(e.clientY>1) 
                                         Parent.style.top = titleDiv.mouseDownY+e.clientY; 
                                     }; 
     titleDiv.onmouseup=function(){ 
                                         if(!beginMoving)return; 
                                         if(titleDiv.releaseCapture)titleDiv.releaseCapture(); 
                                             beginMoving=false; 
                                   }; 
     /*-------------------------------------------------*/ 
     document.getElementById("containerDiv").appendChild(titleDiv);     
     var closeDiv=document.createElement("div"); 
     closeDiv.setAttribute("id","closeBtn"); 
     closeDiv.setAttribute("title","close"); 
     closeDiv.style.width="30px"; 
     closeDiv.style.cursor="pointer"; 
     closeDiv.innerHTML="close"; 
     closeDiv.onclick=function(){ 
                             document.getElementById("titleDiv").removeChild(closeDiv); 
                             document.getElementById("containerDiv").removeChild(titleDiv);  
 
                             document.getElementById("containerDiv").removeChild(contentDiv); 
                             document.body.removeChild(containerDiv); 
                             document.body.removeChild(maskDiv); 
                             } 
     document.getElementById("titleDiv").appendChild(closeDiv); 
     var contentDiv=document.createElement("div"); 
     contentDiv.style.margin="0"; 
     contentDiv.style.height=(contentDivHeight-5)+"px"; 
     contentDiv.setAttribute("id","contentDiv"); 
     contentDiv.innerHTML=str; 
     document.getElementById("containerDiv").appendChild(contentDiv); 
 } 
  </script> 
  </head> 
  <body> 
  <a href="javascript:popup('test',400,300)">测试 </a> 
  <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
  </body> 
  </html>

以上代码在IE下通过,在FF下却不能拖动,问题估计是由于FF下获得鼠标事件失败导致,还请高手帮忙修改下

[解决办法]

HTML code

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="http://www.w3.org/1999/xhtml" > 
  <head> 
    <title>测试 </title> 
  <script type="text/javascript"> 
  function popup(str,popWidth,popHeight){ 
   var titleDivHeight=15; 
   var contentDivHeight=popHeight-20; 
   var borderColor="#6699cc"; 
   var titleDivColor="#709CD2"; 
   var maskDivWidth=document.body.offsetWidth; 
   var maskDivHeight=screen.height; 
   var maskDiv=document.createElement("div"); 
   maskDiv.setAttribute('id','maskDiv'); 
   maskDiv.style.position="absolute"; 
   maskDiv.style.background="#f2f2f2"; 
   maskDiv.style.top="0"; 
   maskDiv.style.left="0"; 
   maskDiv.style.width="100%"; 
   maskDiv.style.height=maskDivHeight + "px"; 
   maskDiv.style.zIndex = "10000"; 
   document.body.appendChild(maskDiv); 
   var containerDiv=document.createElement("div"); 
   containerDiv.setAttribute("id","containerDiv"); 
   containerDiv.setAttribute("align","center"); 
   containerDiv.style.background="white"; 
   containerDiv.style.border="1px solid " + borderColor; 
   containerDiv.style.position = "absolute"; 
   containerDiv.style.left = parseInt((document.body.offsetWidth-popWidth)/2)+"px"; 
   containerDiv.style.top = parseInt((document.body.offsetHeight-popHeight)/2)+10+"px"; 
   containerDiv.style.font="12px Arial"; 
   containerDiv.style.width = popWidth + "px"; 
   containerDiv.style.height =popHeight + "px"; 
   containerDiv.style.zIndex = "10001"; 
   document.body.appendChild(containerDiv); 
   var titleDiv=document.createElement("div");  
 
   titleDiv.setAttribute("id","titleDiv"); 
   titleDiv.setAttribute("align","right"); 
   titleDiv.style.margin="0"; 
   titleDiv.style.padding="4px 0"; 
   titleDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
   titleDiv.style.opacity="65%"; 
   titleDiv.style.background=titleDivColor; 
   titleDiv.style.border="1px solid " + borderColor; 
   titleDiv.style.height=titleDivHeight+"px"; 
   titleDiv.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
   titleDiv.style.color="white"; 
   titleDiv.style.cursor="move"; 
   var beginMoving=false; 
   /*----------------------------------问题所在------------------------------------------*/ 
   titleDiv.onmousedown=function(e){ 
                      beginMoving=true; 
                      var e=e||window.event; 
                      var Parent=titleDiv.offsetParent; 
                      titleDiv.mouseDownX=Parent.offsetLeft-e.clientX; 
                      titleDiv.mouseDownY=Parent.offsetTop-e.clientY; 
                      if(titleDiv.setCapture)titleDiv.setCapture(); 
                      else e.preventDefault(); 
                    }; 
   titleDiv.onmousemove=function(e){ 
                     if(!beginMoving)return; 
                     var e=e||window.event; 
                     var Parent=titleDiv.offsetParent; 
 var pageX = document.all ? e.clientX : e.pageX; 
 var pageY = document.all ? e.clientY : e.pageY; 
                     if(pageX>1) 
                     Parent.style.left = titleDiv.mouseDownX+pageX + "px"; 
                     if(pageY>1) 
                     Parent.style.top = titleDiv.mouseDownY+pageY + "px"; 
                   }; 
   titleDiv.onmouseup=function(){ 
                     if(!beginMoving)return; 
                     if(titleDiv.releaseCapture)titleDiv.releaseCapture(); 
                       beginMoving=false; 
                 }; 
   /*-------------------------------------------------*/ 
   document.getElementById("containerDiv").appendChild(titleDiv);   
   var closeDiv=document.createElement("div"); 
   closeDiv.setAttribute("id","closeBtn"); 
   closeDiv.setAttribute("title","close"); 
   closeDiv.style.width="30px"; 
   closeDiv.style.cursor="pointer"; 
   closeDiv.innerHTML="close"; 
   closeDiv.onclick=function(){ 
               document.getElementById("titleDiv").removeChild(closeDiv);  
 
               document.getElementById("containerDiv").removeChild(titleDiv); 
               document.getElementById("containerDiv").removeChild(contentDiv); 
               document.body.removeChild(containerDiv); 
               document.body.removeChild(maskDiv); 
               } 
   document.getElementById("titleDiv").appendChild(closeDiv); 
   var contentDiv=document.createElement("div"); 
   contentDiv.style.margin="0"; 
   contentDiv.style.height=(contentDivHeight-5)+"px"; 
   contentDiv.setAttribute("id","contentDiv"); 
   contentDiv.innerHTML=str; 
   document.getElementById("containerDiv").appendChild(contentDiv); 
 } 
  </script> 
  </head> 
  <body> 
  <a href="javascript:popup('test',400,300)">测试 </a> 
  <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
  </body> 
  </html>

[解决办法]
FF下做拖拽果然不行啊~~

IE下多简单~~用自己提供的方法就可以了~!
[解决办法]
FF有点卡是因为onmouseover 是 titleDiv 的事件
要改成document.onmouseover 就好了

热点排行

Bad Request.

JavaScript

遮罩层拖动有关问题