ie和firefox下都运行流畅的网页分割条 _Web前端

ie和firefox上都运行流畅的网页分割条

这两天因工作需要做了一个网页分割条，期间碰到不少问题，好在最后都解决了，最后
版本在ie8和firefox3.5上都能流畅运行，现总结一下：

1. 拖动分割条的一个问题是要把鼠标的移动和释放事件不间断地捕获到并进行处理，当
鼠标快速移动时，要保证即使鼠标移出了分割条，进入页面其他元素的范围内，这些事
件也能被捕获到并进行相应的处理。在ie中，这需要使用setCapture()方法，拖动动作
完成后还要用releaseCapture()方法释放。但firefox不支持该方法，网上有的说可以
用window.captureEvents方法，但我在firefox中试过也不行，找了找资料据说这是
netscape的特性，firefox只实现了一个空的方法，并不起作用。firefox解决这一问题
的办法是按下分割条后，就将鼠标移动和释放的事件处理方法绑定到document上，然后
在鼠标释放的时候再进行移除。

2. 拖动分割条中碰到的第二个问题是，在firefox中，拖动很容易中断，可能是因为一
旦鼠标移出了分割条，相应的鼠标事件在某些情况下会被页面中的其他元素截留，这个
问题可以通过event的preventDefault()方法解决。

最后代码如下：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<style>
			.shadowDivA {
				overflow: scroll;
				width: 200px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 0px;
				background-color: yellow;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
			.shadowDivB {
				overflow: scroll;
				width: 500px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 205px;
				background-color: blue;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
			.shadowDivM {
				width: 5px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 200px;
				background-color: grey;
				cursor:e-resize;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
		</style>
		<script type="text/javascript"> 
			var flag = false ;
			var objSplitter = false;

			function down(event, obj){
				if(!flag){
					if(obj.setCapture)
						obj.setCapture();
					else {
						document.addEventListener('mouseup', up, true);
						document.addEventListener('mousemove', move, true);
						event.preventDefault();
					}

					flag = true ;
					objSplitter = obj;
				}
			}
			
			function up(event){
				if(flag){
					if(objSplitter.releaseCapture)
						objSplitter.releaseCapture();
					else {
						document.removeEventListener('mouseup', up, true);
						document.removeEventListener('mousemove', move, true);
						event.preventDefault();
					}

					flag = false ;
				}
			}

			function move(event){
				if(flag){
					var obj1 = document.getElementById("a") ; 
					var obj2 = document.getElementById("b") ;
					obj1.style.width = event.clientX + "px" ;
					obj2.style.left = (event.clientX + 5) + "px" ;
					obj2.style.width = (700 - event.clientX) + "px" ; 

					objSplitter.style.left = event.clientX + "px" ;
					if(!objSplitter.releaseCapture) {
						event.preventDefault();
					}
				}
			}
		</script> 
</head>

<body>
	<div id="a" class="shadowDivA">
	</div>
	<div class="shadowDivM" onmousedown="down(event, this);" onmouseup="up(event);" onmousemove="move(event);">
	</div>
	<div id="b" class="shadowDivB">
	</div>
</body>
</html>

1 楼 Rooock 2010-01-13

报告BUG:
当分割条到黄色或者蓝色的边界时, 会出现参数无效的错误.

2 楼 yiyu 2010-01-13

呵呵，只是试一下分割条，没做边界值处理
谢了

3 楼 liu_87663663 2010-01-18

报告BUG: ie6下分隔条不能拖拽

4 楼 yiyu 2010-01-18

确实
把.shadowDivM的
background-color: grey;
改成
background-color: #888888;
就可以了，难道是ie6不支持grey这个颜色定义?

5 楼 yose 2010-01-19

楼主能修正一下再贴上来吗？
我也学习学习

6 楼 yiyu 2010-01-19

这个版本在ie6上也能跑

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<style>
			.shadowDivA {
				overflow: scroll;
				width: 200px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 0px;
				background-color: yellow;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
			.shadowDivB {
				overflow: scroll;
				width: 500px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 205px;
				background-color: blue;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
			.shadowDivM {
				width: 5px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 200px;
				background-color: #888888;
				cursor:e-resize;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
		</style>
		<script type="text/javascript"> 
			var flag = false ;
			var objSplitter = false;

			function down(event, obj){
				if(!flag){
					if(obj.setCapture)
						obj.setCapture();
					else {
						document.addEventListener('mouseup', up, true);
						document.addEventListener('mousemove', move, true);
						event.preventDefault();
					}

					flag = true ;
					objSplitter = obj;
				}
			}
			
			function up(event){
				if(flag){
					if(objSplitter.releaseCapture)
						objSplitter.releaseCapture();
					else {
						document.removeEventListener('mouseup', up, true);
						document.removeEventListener('mousemove', move, true);
						event.preventDefault();
					}

					flag = false ;
				}
			}

			function move(event){
				if(flag){
					var obj1 = document.getElementById("a") ; 
					var obj2 = document.getElementById("b") ;
					obj1.style.width = event.clientX + "px" ;
					obj2.style.left = (event.clientX + 5) + "px" ;
					obj2.style.width = (700 - event.clientX) + "px" ; 

					objSplitter.style.left = event.clientX + "px" ;
					if(!objSplitter.releaseCapture) {
						event.preventDefault();
					}
				}
			}
		</script> 
</head>

<body>
	<div id="a" class="shadowDivA">
	</div>
	<div class="shadowDivM" onmousedown="down(event, this);" onmouseup="up(event);" onmousemove="move(event);">
	</div>
	<div id="b" class="shadowDivB">
	</div>
</body>
</html>

7 楼 dieslrae 2010-01-19

IE8下还是拉出边界之后还是有问题

8 楼 yiyu 2010-01-19

哦，那些没改，加些判断就可以了