主页面：main.html

 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>Iframe框架DIV操作</title> 
  6. </head> 
  7. <body> 
  8.   <iframe id="left" name="left" width="40%" height="500px" src="left.html" ></iframe> 
  9.   <iframe id="right" name="right" width="40%" height="500px" src="right.html"></iframe> 
  10. </body> 
  11. </html> 
 
  
左侧iframe：left.html
 
  
 
  
  1. <html> 
  2. <head> 
  3. <script> 
  4. var obj;  
  5. var x;  
  6. var y;  
  7. function fun_down(divobj){  
  8.     obj = divobj;  
  9.     x = event.x;  
  10.     y = event.y;  
  11. }  
  12. document.onmousemove = function(){  
  13.     if(obj){  
  14.         var x1 = event.x - x;  
  15.         var y1 = event.y - y;  
  16.         x = event.x;  
  17.         y = event.y;  
  18.         objobj.style.left = obj.offsetLeft + x1;  
  19.         objobj.style.top = obj.offsetTop + y1;  
  20.     }  
  21. }  
  22. document.onmouseup = function(){  
  23.     if(obj){  
  24.         obj.releaseCapture();  
  25.         obj = null;  
  26.     }  
  27. }  
  28.  
  29.  
  30. </script> 
  31. </head> 
  32. <body> 
  33. <div style="text-align:center">左边iframe</div> 
  34. <div id="div1" onmousedown="fun_down(this);" style="position:absolute; left:200px; top:200px;   
  35. background-color:#00FF00; width:50px; height:50px" >LEFT可拖动</div> 
  36. </body> 
  37. </html> 
 
  
右侧iframe：right.html
 
  
 
  
  1. <html> 
  2. <head> 
  3. <script> 
  4.     var intX;  
  5.     var intY;  
  6.     var intX1;  
  7.     var intY1;  
  8.     var blnDrag = false; //鼠标是否已经按下  
  9.     //获取左iframe对象  
  10.     var v = parent.document.frames['left'];  
  11.     //鼠标按下  
  12.     function MouseDown() {  
  13.         //鼠标按下  
  14.         blnDrag = true;  
  15.         //alert(v.document.body.innerHTML);           
  16.         intX = event.clientX - GetDiv().style.pixelLeft;           
  17.         intY = event.clientY - GetDiv().style.pixelTop;   
  18.         intX1 = event.clientX - v.document.getElementById("div1").style.pixelLeft;           
  19.         intY1 = event.clientY - v.document.getElementById("div1").style.pixelTop;          
  20.     }  
  21.  
  22.     //鼠标拖动          
  23.     function DragDiv() {              
  24.         //判断鼠标是否已经按下              
  25.         if (!blnDrag) {                  
  26.         return false;                 
  27.         }              
  28.         else {                  
  29.         GetDiv().style.pixelLeft = event.clientX - intX;                  
  30.         GetDiv().style.pixelTop = event.clientY - intY;  
  31.         v.document.getElementById("div1").style.pixelLeft = event.clientX - intX1;                  
  32.         v.document.getElementById("div1").style.pixelTop = event.clientY - intY1;              
  33.         }          
  34.     }  
  35.           
  36.     //鼠标松开时          
  37.     function MouseUp() {                  
  38.         //鼠标没有按下              
  39.         blnDrag = false;  
  40.     }  
  41.  
  42.     //得到DIV          
  43.     function GetDiv() {              
  44.         return document.getElementById("div2");  
  45.     }  
  46. </script> 
  47. </head> 
  48. <body> 
  49. <div style="text-align:center">右边iframe</div> 
  50. <div id="div2" style=" text-align:center;position:absolute; left:200px; top:200px; background-color:#FF0000;   
  51. width:50px; height:50px" onmousemove="DragDiv()" onMouseDown="MouseDown()" onMouseUp="MouseUp()">RIGHT<br>可带动左边</div>  
  52. </body> 
  53. </html>