<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0px;padding:0px}
html{overflow:hidden}
#sideBar{width:200px;height:100%;overflow:auto}
#toggleBar,.div{
width:7px;height:100%;
overflow:hidden;background:#eee;
cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;
}
td{display:block;overflow:auto;word-break:break-all;}
</style>
<script type="text/javascript" src="../Common/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//及时调整页面内容的高度
setInterval(function(){
var winH=(document.documentElement||document.body).clientHeight;
$("#tbl,#sideBar,#toggleBar,#main").css("height",winH);
$("td").each(function(){$(this).html()||$(this).html(" ")});
},100)
}
);
var begin_x;
var drag_flag = false;
document.onmousemove = mouseDrag
document.onmouseup = mouseDragEnd
//半透明的拖动条（模拟）
var alphaDiv="<div class='div' id='alphaDiv' style='position:absolute;height:2000px;top:0;z-index:10001;filter:alpha(opacity=50);opacity:0.5;left:200px'> </div>";
function setDrag(){
drag_flag=true;
begin_x=event.x;
//添加蒙板
createMask();
//添加半透明拖动条
$(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
}
//关键部分
function createMask(){
//创建背景
var rootEl=document.documentElement||document.body;
var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";
var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";
var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0";
$("<div id='shield' style=\""+shieldStyle+"\"></div>").appendTo("body");
}
//拖动时执行的函数
function mouseDrag(){
if(drag_flag==true){
if (window.event.button==1){
var now_x=event.x;
var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
$("#alphaDiv")[0].style.left=value+"px";
begin_x=now_x;
}
$("body").css("cursor","e-resize"); //设定光标类型
}else{
try{
$("#shield").remove();
$("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
$("#alphaDiv").remove();
}catch(e){}
}
}
function mouseDragEnd(){
//设置拖动条的位置
if(drag_flag==true){
//设定拖动条的位置（设定左侧的宽度）
$("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
$("#shield").remove(); //删除蒙板
$("#alphaDiv").remove(); //删除半透明拖动条
$("body").css("cursor","normal"); //恢复光标类型
}
drag_flag=false;
}
</script>
</head>
<body>
<table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
<tr>
<td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
</td>
<td width="1" onmousedown="setDrag()" id="toggleBar"></td>
<td id="main">
<iframe src="test.htm" id="frmMain" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
这时我们就发现问题了，只能向左边拖动，但不能像右边拖动，这是为什们呢？
经过检查，发现原来当鼠标移动到iframe上就无法捕获鼠标的位置了，event对象也不存在。得不到鼠标的位置我们的拖动当然会出现问题了。
这个问题着实让我郁闷了许久，然后测试其他的一些layout（对iframe进行了处理）发现凡是使用iframe的都有一个缺陷，当鼠标拖动速度很快的时候，拉动条速度跟不上（当然这些并没有那个模拟的半透明的拖动条，直接拖动真实的拖动条的），感觉就是很不流畅很不同步。
我们看一下直接拖动真是滚动条的情况
演示地址：http://www.ajaxbbs.net/test/layout/JqSplit/iframeRightNoAlpha.htm我们慢速度拖动还是可以向右移动的，但一但速度稍快便不能拖动了。
对于这个问题始终没有想到好的解决办法，就在我悲伤的即将放弃时，看到前几天写的一个模拟弹出框，因为当时测试弹出框应该要遮住包括iframe在内的select。所以页面中使用了ifame。突然发现一个索引很高的层能够遮住iframe，突然间就有了灵感，马上实验。
思路如下：拖动拉条时在页面添加一个索引很大的层（如10000），将其透明度设为0（完全透明），这样鼠标就不会移动到iframe中，但iframe仍然存在可以看到。当拖动结束（onmouseup）时去掉这个层即可，这样就实现了比较完美的拖动。
分享到：
相关推荐
### 一个刚完成的Layout（拖动流畅，不受iframe影响） #### 问题背景及解决方案概述 在Web开发中，创建一个既美观又实用的布局是非常重要的。本文将介绍一种特殊的布局设计方法，该方法能够确保在任何情况下都能...
PADS9.5 logic&layout菜单显示不全WIN8 WIN10补丁_make_28PADS9.5 logic&layout菜单显示不全WIN8 WIN10补丁_make_28PADS9.5 logic&layout菜单显示不全WIN8 WIN10补丁_make_28PADS9.5 logic&layout菜单显示不全WIN8 ...
- **跨域限制**：由于同源策略的限制，如果`iframe`加载的是不同源的网页，则无法通过JavaScript访问其中的内容。 - **样式冲突**：`iframe`内的网页可能会与外部页面的样式发生冲突，需要注意隔离样式。 #### 四...
swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3...
PADS Layout 9.5的封装向导是帮助设计师快速创建或编辑封装的工具，但若向导窗口显示不全，可能导致部分选项或设置无法访问，从而影响设计效率和准确性。 这个问题的修复方法已经包含在提供的压缩包中，通过修改...
Sprint-Layout60，作为一个优秀的布局管理工具，凭借其高效、易用的特点，受到了广大开发者的热烈欢迎。本文将深入探讨Sprint-Layout60的核心功能、使用方法以及它如何帮助开发者优化项目。 首先，Sprint-Layout60...
同步之后，Layout和Router不能同时进行操作，同一时刻只有一个处于活跃状态。这就需要设计师在设计过程中进行 Layout与Router控制权的切换，以避免同时操作导致的冲突。控制权的切换非常简单，通过工具条上的Layout...
本文深入探讨了PCB Layout设计中采样电路走线不平衡对计量精度的影响，并通过实际案例分析，指导如何在设计中避免这些问题。 首先，引言部分强调了物联网的兴起对智能终端的推动作用，特别是在智能家居、智慧照明等...
在DevExpress的布局控件(LayoutControl)中，有时候用户可能会遇到一个常见的问题，即在内置的控件上无法通过鼠标滚轮触发滚动行为。这可能是由于默认的事件处理或控件设置导致的。本文将深入探讨这个问题，并提供17...
在网页设计与开发中，布局是至关重要的一步，它直接影响到用户的浏览体验和信息传递的效率。layout.js布局插件应运而生，专为实现网页的高效、灵活布局提供了解决方案。这款插件以其强大的功能和易用性，受到了广大...
电磁干扰（EMI）可能会对设备的正常工作产生影响，而静电放电（ESD）防护则是为了保护设备免受静电损害。 USB3.0设备的硬件设计指南中，还涉及到一些特殊的设计注意点，比如LPP（低性能外设）模式的设计，以及引导...
拖动过程中和拖动后，可能需要添加平滑动画效果，使得用户体验更加流畅。这可能涉及到ObjectAnimator、ValueAnimator或Transition API的使用。 7. **数据结构与排序**： 为了保存和更新图片的顺序，开发者需要...
5. **布局与样式**：对于`layout.html`，可能涉及到的是页面布局和样式设计，确保弹出框和遮罩层的位置正确，不影响用户的其他操作。这可能需要用到CSS的定位（positioning）和z-index属性来调整层叠顺序，让弹出框...
pads9.5安装到win10中文版系统后，logic的设置选项和layout 元件封装向导窗口显示不全，窗口下边和右边有文字和按钮不能显示；原因是中文windows系统的字体的原因，使得pads这两个窗口一些字体太大，致使装口显示不...
Layoutit BootStrap3是基于此框架的一个在线布局工具，它提供了一个直观的拖拽界面，帮助开发者无需编写代码就能设计出复杂的Bootstrap页面布局。 Bootstrap3的核心组件包括网格系统、表单、按钮、导航、下拉菜单、...
根据提供的文件信息，我们来详细探讨音频Layout设计规范，这个规范主要涉及音频原理图、元器件布局以及PCB走线三个方面。这些内容是音频设计中的核心，每一个环节都对最终的音频质量有着直接的影响。 首先，音频...
本文主要介绍了使用 Vue 实现 Grid Layout 功能的代码讲解，涵盖了基本布局、节点排版、拖拽事件等多个方面的知识点。 基本布局 在实现 Grid Layout 功能之前，首先需要 clone 项目到本地，然后使用 `git reset --...
当Panel包含一个IFrame时，可能会遇到页面高度调整的问题，特别是在动态加载内容或者IFrame内页面高度不固定时。本文将深入探讨如何在使用ExtJS时解决Panel与IFrame结合时页面高度自动适应的问题。 首先，我们需要...