div實現拖拽效果，同時包含iframe

遮蔽iframe對事件的接收和響應，在一個介面中捕獲mouseover、mousedown、mouseup事件。

<script type="text/javascript">  
var splitUtil = {
		x:0,
		drag:false,
		startFunc:function(e){
			console.log("start");
			splitUtil.drag = true;
			//記錄初始位置
			splitUtil.x = e.clientX;
			$(document).bind("mousemove", splitUtil.movingFunc).bind("mouseup",
					splitUtil.endFunc);
			$("#div1").show();
		},
		endFunc:function(e){
			console.log("end");
			if(splitUtil.drag && e.clientX != splitUtil.x){
				var temp = e.clientX + 1 ;
				
				$('#menu').width(temp); 
				$('#right').css('right','0px');
				$('#right').css('top','0px');
				$('#right').css('left',temp + 5 + 'px');
	    	 }
			 splitUtil.drag = false;
	         $(document).unbind("mousemove").unbind("mouseup");
	         $("#div1").hide();
		},
		movingFunc:function(e){
			console.log("moving");
			if (splitUtil.drag && e.clientX != splitUtil.x) {
		         var e = e || window.event;
		         var temp = e.clientX  + 3;
		 		$("#rightbar").css({"left":(temp)});
		     }
		},
};

$(function() {   
	$("#rightbar").mousedown(splitUtil.startFunc);
});  
</script>

<div id="div1" style="position:absolute; left:0; top:0; width: 100%; height: 100%; z-index: 10; background-color: white;"></div>
	
   <div style="float: left; height:100%;" id="menu" class="content">
    <iframe id="mainIframe1" scrolling="auto"
				src="XXX"></iframe>	
				
			
   </div>    
    <div id="rightbar"  
    style="width: 3px; background: #cccccc; cursor: e-resize; height:100%; position: absolute; left:200px; z-index: 12;"></div>  
    <div id="right" style="height:100%; position: absolute; top:0; right: 0; left: 203px; background: white;">  
   <iframe id="mainIframe2"
			src="WWW"></iframe> 
    </div>

#div1{
opacity:0;
filter:Alpha(opacity=0);
display: none;