div实现拖拽效果，同时包含iframe

曾经终败给现在 2022-08-20 15:15 165阅读 0赞

屏蔽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;

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关 div实现拖拽效果，同时包含iframe

屏蔽iframe对事件的接收和响应，在一个界面中捕获mouseover、mousedown、mouseup事件。 <script type="text/javascr

曾经终败给现在/ 2022年08月20日 15:15/ 0 赞/ 166 阅读

相关 div实现拖拽效果，宽度发生变化

最近项目中，需要写个能够拖拽的div，从网上找了相关的代码，为了方便以后使用，记下。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML

比眉伴天荒/ 2022年08月20日 09:27/ 0 赞/ 208 阅读

相关会话框拖拽效果实现

允许转载，但请注明出处：http://blog.csdn.net/sysuzjz/article/details/41801415 遇到这需求是想模仿网页版QQ，多个会话框时

缺乏、安全感/ 2022年08月06日 01:06/ 0 赞/ 241 阅读

相关 HTML 拖拽效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

曾经终败给现在/ 2022年07月19日 06:27/ 0 赞/ 259 阅读

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 231 阅读

相关 RecycleView实现拖拽效果

以下是RecyclerView结合ItemTouchHelper实现的列表和网格布局的拖拽效果。效果图如下：（gif图有点顿卡，其实运行是很流畅的） ![这里写图片描述]

梦里梦外;/ 2022年06月07日 03:59/ 0 赞/ 430 阅读

相关原生JavaScript实现div拖拽效果

实现思路：（1）首先改变被拖动元素的布局属性为“position：absolute”，其父框为“position：relative”；（2）捕捉鼠标事件“mo

分手后的思念是犯贱/ 2022年05月24日 03:43/ 0 赞/ 366 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 305 阅读

相关鼠标拖拽效果的实现

我所说的“鼠标拖拽效果”是指，鼠标在某个图标上按下，然后拖动，图标随着鼠标移动；这个效果的实现依赖控件的三个事件：Mouse\_Down,Mouse\_Move,Mouse\_

「爱情、让人受尽委屈。」/ 2021年11月10日 13:24/ 0 赞/ 488 阅读

相关 vue - 实现图片拖拽效果

下面我来分享一下如何实现图片多拽，在文章的尾部加上实现的案例。 [github地址][github]：https://github.com/sunshime/comPa

- 日理万妓/ 2021年09月30日 10:50/ 0 赞/ 558 阅读