需求:可以随时拖动中间div改变两边的边框架(left,right)宽度,并解决了拖拽过程中不断渲染页面的效率问题.
缺陷:仅支持ie.
- <HTML>
- <head>
- <style type='text/css'>
- .table{
- width:400;
- height:2;
- background-color:red;
- border-color:yellow;
- border:0px;
- }
- </style>
- <SCRIPT LANGUAGE="JavaScript">
- var isIe = true;
- if(!document.all)
- {
- isIe = false;
- }
- function downToResize(obj,e){
- obj.style.cursor='col-resize';
- var e = isIe ?window.event : e;
- //记录开始准备移动的起始位置
- obj.mouseDownX=e.clientX;
- //父级左边框架的宽度
- obj.parentLeftFW = document.getElementById('left').parentNode.clientWidth;
- //父级右边框架的宽度
- obj.parentRightFW = document.getElementById('right').parentNode.clientWidth;
- obj.parentBox = document.getElementById('box');
- if(isIe)obj.setCapture();
- else{
- alert('不支持火狐..');
- obj.mouseDownX = 0;
- }
- }
- function moveToResize(obj,e){
- var e = isIe ?window.event : e;
- if(!obj.mouseDownX) return false;
- obj.removed = 1;
- obj.parentBox.style.display = 'inline';
- obj.parentBox.style.width = obj.offsetWidth;
- obj.parentBox.style.height = obj.offsetHeight;
- obj.parentBox.style.left = e.clientX;
- obj.parentBox.style.top = getPosTop(obj.parentBox);
- }
- function getPosLeft(elm) {
- var left = elm.offsetLeft;
- while((elm = elm.offsetParent) != null) {
- left += elm.offsetLeft;
- }
- return left;
- }
- function getPosTop(elm) {
- var top = elm.offsetTop;
- while((elm = elm.offsetParent) != null) {
- top += elm.offsetTop;
- }
- return top;
- }
- function upToResize(obj,e){
- var e = isIe ?window.event : e;
- //下面是实际的移动边框的大小
- var changeW = e.clientX*1-obj.mouseDownX;
- if(changeW!=0&&obj.removed){
- var newLeftW=obj.parentLeftFW*1+changeW;
- var newRightW=obj.parentRightFW*1-changeW;
- if(newLeftW<=200) {
- var temp = newLeftW;
- newLeftW = 200;
- newRightW =newRightW-(200-temp);
- }
- if(newRightW<=200) {
- var temp = newRightW;
- newRightW = 200;
- newLeftW = newLeftW-(200-temp);
- }
- var leftObj = parent.document.getElementById('left').parentNode;
- leftObj.width = newLeftW;
- leftObj.firstChild.style.width = newLeftW+'px';
- var rightObj = parent.document.getElementById('right').parentNode;
- //下面的之所以要减掉一个4,是在鼠标旁边的一个小小的位移..
- rightObj.width = newRightW-4;
- rightObj.firstChild.style.width = newRightW-4;
- }
- if(isIe)obj.releaseCapture();
- else{
- }
- obj.mouseDownX=0;
- obj.removed = 0;
- obj.style.cursor = 'default';
- obj.parentBox.style.display = 'none';
- }
- </SCRIPT>
- </head>
- <body style="overflow: hidden;">
- <div id='box' style="display:'none';position:'absolute';border:'1px dotted red';z-index:5;width:20px;height:100px;"></div>
- <TABLE height="100%" width='100%'>
- <TR>
- <TD ><iframe id='left' src='test.html' style="width:100%;height:100%;z-index: -1;border:0px;" scrolling="no"></iframe>
- </TD>
- <td><div style='height:100%;background-color:red;width:8px;'
- οnmοusedοwn="downToResize(this,event);"
- οnmοuseοver="this.style.cursor='col-resize';"
- οnmοusemοve="moveToResize(this,event);"
- οnmοuseοut="this.style.cursor='default';"
- οnmοuseup="upToResize(this,event);"></div></td>
- <TD><iframe id='right' src='test.html' style="height:100%;z-index: -1;width:100%;border:0px;" scrolling="no" ></iframe></TD>
- </TR>
- </TABLE>
- </body>
- </HTML>