iframe分栏拖拽伸缩例子

这个标题有些绕口，鄙人愚笨，实在找不到一个比较准确的说法，总之就是：

一个页面内显示多个iframe，一个变宽，另一个就变窄，一个变高，另一个就变矮的这种可自由伸缩的效果。它们之间有一个可多拽的分隔条。

我们公司的电算化考试平台需要这样的效果。最开始用的frameset，框架集，但有些问题，比如分隔条的样式不好自己设计，frameset页面不支持执行javascript。

后来我对其进行了改进，将frameset改为使用iframe，通过自己实现分隔条和拖拽效果来满足功能。

效果图：

可以点击分隔条折叠，也可以拖动分隔条调整各区域大小。

上图中，main.html页面按左右分隔嵌入了一个left.html和一个right.html

right.html里又按上下分隔嵌入了right_top.html和right_bottom.html

由于left.html、right_top.html、right_bottom.html是具体内容页面，此处不贴出代码，只贴出main.html和right.html的代码。

main.html代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  6     <meta name="renderer" content="webkit">
  7     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
  8     <style type="text/css">
  9         *{padding:0px;margin:0px;}
 10         html,body{width:100%;height:100%;}
 11     </style>
 12     <title>会计电算化专业技能考试系统</title>
 13     <script type="text/javascript">
 14         /***
 15          *
 16          * iframe横向分隔条拖拽伸缩实例 陈建宇 2016-6-14
 17          *
 18          ***/
 19         function init(){
 20
 21             var li = $("#li");//left iframe
 22             var ri = $("#ri");//right iframe
 23             var s = $("#s");//中间分割条
 24             var img = s.children("img").eq(0);
 25             var drag = $("#drag");//分隔条中的拖拽层.
 26
 27             var clientWidth = $(window).width();
 28             var li_init_width=270;//上边iframe要显示的宽度,若需要调整默认宽度,请改此值即可.
 29             var s_init_width=10;//分隔条宽度默认值
 30             var ri_width=clientWidth-li_init_width-s_init_width;//底部iframe要显示的宽度
 31
 32             //初始化
 33             li.css("width",li_init_width+"px");
 34             ri.css("width",ri_width+"px");
 35             s.css("left",li_init_width+"px").css("width",s_init_width+"px");
 36             img.css("width",s_init_width+"px").css("box-shadow","0 0 6px #666");
 37
 38             var is_drag = false;//是否点住并进行了拖拽
 39
 40
 41             /***
 42              * 分隔条事件处理,如果用户执行了mousedown,mousemove,mouseup说明是拖拽,
 43              * 如果只执行了mousedown,mouseup说明是点击.
 44              */
 45
 46
 47             drag.unbind("mousedown").mousedown(function () {
 48                 //获得分隔条内拖拽层离顶边的距离
 49                 var li_width = parseInt(li.css("width"));
 50                 var ri_width = parseInt(ri.css("width"));
 51
 52                 //分隔条div宽度设为100%,撑满屏,只有这样才能在拖拽分隔条时,有效的控制mouseup事件.
 53                 s.css("width","100%").css("left","0px");
 54                 img.css("left",li_width);
 55
 56                 var start_x = event.clientX;
 57
 58                 drag.unbind("mousemove").mousemove(function (event) {
 59                     is_drag = true;
 60                     var current_x = event.clientX;
 61                     var cha = current_x - start_x;//算偏移差量
 62
 63                     li.css("width",(li_width+cha)+"px");
 64                     ri.css("width",(ri_width-cha)+"px");
 65                     img.css("left",(li_width+cha)+"px");
 66
 67
 68
 69                 });
 70
 71                 drag.unbind("mouseup").mouseup(function (event) {
 72                     var left = parseInt(img.css("left"));
 73                     s.css("width",s_init_width+"px").css("left",left+"px");
 74                     img.css("left","0px");
 75
 76                     //处理非拖拽的click情况
 77                     if(!is_drag){
 78
 79                         //直接设定固定值
 80                         var src=img.attr("src");
 81                         if(src.indexOf("toleft")!=-1){
 82                             li.css("width","0px");
 83                             s.css("left","0px");
 84                             clientWidth = $(window).width();
 85                             ri.css("width",(clientWidth-s_init_width)+"px");
 86                             img.attr("src",src.replace("toleft","toright"));
 87                         }else{
 88                             li.css("width",li_init_width+"px");
 89                             s.css("left",li_init_width+"px");
 90                             clientWidth = $(window).width();
 91                             ri.css("width",(clientWidth-li_init_width-s_init_width)+"px");
 92                             img.attr("src",src.replace("toright","toleft"));
 93                         }
 94
 95                     }
 96
 97                     drag.unbind("mousemove");
 98                     is_drag = false;
 99
100
101
102                 });
103
104
105
106             });
107
108
109             //当窗口大小发生改变时,重新渲染页面,以使各组件自适应高宽度.
110             $(window).resize(function() {
111                 //顶部iframe保持高度不变,改变底部iframe高度
112                 var clientWidth = $(window).width();
113                 var li_width = parseInt(li.css("width"));
114                 var new_ri_width = clientWidth - li_width - s_init_width;
115                 ri.css("width",new_ri_width+"px");
116
117             });
118
119         }
120
121
122
123         /***
124          * 加载左边页面方法 陈建宇 2016-6-21
125          * 当右边页面先加载完后再加载左边页面,因为左边页面需要控制右边页面里的iframe
126          * 如果右边页面还没加载完,则会出错,左边页面也会加载失败.
127          */
128         function loadLeft(){
129             $("#li").attr("src","exam/left.html");
130         }
131
132
133         $(document).ready(function(){
134
135             init();
136
137         });
138
139     </script>
140
141
142 </head>
143 <body scroll="no">
144 <iframe id="li" name="left" src="left.html" frameborder="0" style="height:100%;border:none;position:absolute;left:0px;top:0px;z-index:1;"></iframe>
145 <div id="s" style="height:100%;position:absolute;z-index:3;cursor:move;">
146     <img style="height:100%;position:absolute;z-index:1;" src="images/toleft.png"/>
147     <div style="height:100%;width:100%;position:absolute;z-index:2;margin-left:0px;margin-top:0px;padding:0px;filter:alpha(opacity=0);opacity:0;background-color:#fee;" id="drag"></div>
148 </div>
149 <iframe id="ri" name="right" src="right.html" frameborder="0" style="height:100%;border:none;position:absolute;top:0px;right:0px;z-index:2;"></iframe>
150
151
152 </body>
153
154 </html>

right.html代码：

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2         "http://www.w3.org/TR/html4/loose.dtd">
  3 <html>
  4 <head>
  5     <title>iframe纵向分隔条拖拽伸缩</title>
  6     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7     <style type="text/css">
  8         *{padding:0px;margin:0px;}
  9         html,body{width:100%;height:100%;}
 10     </style>
 11     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
 12     <script type="text/javascript">
 13
 14         /***
 15          *
 16          * iframe纵向分隔条拖拽伸缩 陈建宇 2016-6-14
 17          *
 18          ***/
 19
 20         function init(){
 21
 22             var ti = $("#ti");//top iframe
 23             var bi = $("#bi");//bottom iframe
 24             var s = $("#s");//中间分割条
 25             var img = s.children("img").eq(0);
 26             var drag = $("#drag");//分隔条中的拖拽层.
 27
 28             var clientHeight = $(window).height();
 29             var ti_init_height=160;//上边iframe要显示的高度,若需要调整默认高度,请改此值即可.
 30             var s_init_height=10;//分隔条高度默认值
 31             var bi_height=clientHeight-ti_init_height-s_init_height;//底部iframe要显示的高度
 32
 33             //初始化
 34             ti.css("height",ti_init_height+"px");
 35             bi.css("height",bi_height+"px");
 36             s.css("top",ti_init_height+"px").css("height",s_init_height+"px");
 37             img.css("height",s_init_height+"px").css("box-shadow","0 0 6px #666");
 38
 39             var is_drag = false;//是否点住并进行了拖拽
 40
 41
 42             /***
 43              * 分隔条事件处理,如果用户执行了mousedown,mousemove,mouseup说明是拖拽,
 44              * 如果只执行了mousedown,mouseup说明是点击.
 45              */
 46
 47
 48             drag.unbind("mousedown").mousedown(function () {
 49                 //获得分隔条内拖拽层离顶边的距离
 50                 var ti_height = parseInt(ti.css("height"));
 51                 var bi_height = parseInt(bi.css("height"));
 52
 53                 //分隔条div高度设为100%,撑满屏,只有这样才能在拖拽分隔条时,有效的控制mouseup事件.
 54                 s.css("height","100%").css("top","0px");
 55                 img.css("top",ti_height);
 56
 57                 var start_y = event.clientY;
 58
 59                 drag.unbind("mousemove").mousemove(function (event) {
 60                     is_drag = true;
 61
 62                     var current_y = event.clientY;
 63                     var cha = current_y - start_y;//算偏移差量
 64
 65                     ti.css("height",(ti_height+cha)+"px");
 66                     bi.css("height",(bi_height-cha)+"px");
 67                     img.css("top",(ti_height+cha)+"px");
 68
 69
 70
 71                 });
 72
 73                 drag.unbind("mouseup").mouseup(function (event) {
 74                     var top = parseInt(img.css("top"));
 75                     s.css("height",s_init_height+"px").css("top",top+"px");
 76                     img.css("top","0px");
 77
 78                     //处理非拖拽的click情况
 79                     if(!is_drag){
 80
 81                         //直接设定固定值
 82                         var src=img.attr("src");
 83                         if(src.indexOf("totop")!=-1){
 84                             ti.css("height","0px");
 85                             s.css("top","0px");
 86                             clientHeight = $(window).height();
 87                             bi.css("height",(clientHeight-s_init_height)+"px");
 88                             img.attr("src",src.replace("totop","tobottom"));
 89                         }else{
 90                             ti.css("height",ti_init_height+"px");
 91                             s.css("top",ti_init_height+"px");
 92                             clientHeight = $(window).height();
 93                             bi.css("height",(clientHeight-ti_init_height-s_init_height)+"px");
 94                             img.attr("src",src.replace("tobottom","totop"));
 95                         }
 96
 97                     }
 98
 99                     drag.unbind("mousemove");
100                     is_drag = false;
101
102
103
104                 });
105
106
107
108             });
109
110             //当窗口大小发生改变时,重新渲染页面,以使各组件自适应高宽度.
111             $(window).resize(function() {
112                 //顶部iframe保持高度不变,改变底部iframe高度
113                 var clientHeight = $(window).height();
114                 var ti_height = parseInt(ti.css("height"));
115                 var new_bi_height = clientHeight - ti_height - s_init_height;
116                 bi.css("height",new_bi_height+"px");
117
118             });
119
120
121         }
122
123
124
125
126
127         $(document).ready(function(){
128             init();
129             parent.loadLeft();
130         });
131     </script>
132 </head>
133 <body scroll="no">
134 <iframe id="ti" name="top" src="right_top.html" frameborder="0" style="width:100%;border:none;position:absolute;top:0px;left:0px;z-index:1;"></iframe>
135 <div id="s" style="width:100%;position:absolute;z-index:3;cursor:move;">
136     <img style="width:100%;position:absolute;z-index:1;" src="images/totop.png"/>
137     <div style="width:100%;height:100%;position:absolute;z-index:2;margin-top:0px;margin-left:0px;padding:0px;filter:alpha(opacity=0);opacity:0;background-color:#fee;" id="drag"></div>
138 </div>
139 <iframe id="bi" name="bottom" src="right_bottom.html" frameborder="0" style="width:100%;border:none;position:absolute;bottom:0px;left:0px;z-index:2;"></iframe>
140
141 </body>
142 </html>

分隔条图片：

时间： 2024-11-12 21:21:20

iframe分栏拖拽伸缩例子的相关文章

JavaScript拖拽原理的实现

实现拖拽的基本思路 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化:元素的移动就是style.position的top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. 根据以上的基本原理,我写出了下面的基本思路.感觉代码还是比较短的, view plaincopy to clipboardprint 拖拽状态 = 0鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的

关于jqueryUI里的拖拽排序

主要参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这个是html代码 <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog"> <h2>

WPF中元素拖拽的两个实例

原文:WPF中元素拖拽的两个实例 今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListView的某一个节点,从而将该子元素作为当前节点的子节点.第二个例子就是将ListView的某一项拖拽到另外一项上从而使两个子项位置互换,这两个例子的原理类似,实现细节上有所差别,下面就具体分析一下这些细节. DEMO1 一 示例截图 图一 示例一截图 二 重点原理分

threejs 限制物件只能在指定平面上拖拽

threejs提供有 DragController.js的例子来辅助拖拽 该例子可以在基于当前屏幕的x和y轴上拖拽物体,但是它不能影响z轴. 查看代码,可以在touchStart\mousedown下找到下述代码: _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld

【原创】js实现一个可随意拖拽排序的菜单导航栏

1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换.未添加和已添加里面的小方块位置可以拖放. 3.结构分析.整体结构用红线框标出.可以分为三个部分.关注底部拖拽部分.一个div里面嵌套两个div.定位关系如图.本次教程之作一个拖拽框 1.好了,基本情况已经分析清楚先实现页面样式. <div class="wrap"> <

IE8利用setCapture和releaseCapture解决iframe的拖拽事件

最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,最后查找资料得知可以使用ie自带的setCapture和releaseCapture来解决. sideDragBar.on('mousedown.sideMenu', function(e){ this.setCapture && this.setCapture();// ie下可以使用setCapture来解决object拖拽问题 startDragging(e);

一个用js实现拖拽的小例子

代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 9 body { 10 margin: 0; 11 } 12 13 #rect { 14 width: 100px; 15 height: 100px; 16 b

JQUERY 拖拽 draggable droppable resizable selectable sortable

今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script> <script language="JavaScript" type="text/javascript" src="

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像是可以拖动的,不用再写代码即可拖动.如果想让其他元素标签也可以拖动,那么只有HTML5能实现了.HTML5为所有HTML元素规定了dragable属性,表示元素是否可以拖动.链接和图像的标签中自动将dragable属性自动被设置成true,其他元素的dragable属性的默认值是false. 支持d